深说浅谈DOM对象，用4个版本demoplus让你扭断history.state头（更）

什么是节点

HTML 文档中的每个成分都是一个节点。

（1）节点类型

DOM 是这样规定的：

• 整个文档是一个文档节点
• 每个 HTML 标签是一个元素节点
• 包含在 HTML 元素中的文本是文本节点
• 每一个 HTML 属性是一个属性节点 注释属于注释节点

（2）节点层次关系-节点彼此都有等级关系。

HTML 文档中的所有节点组成了一个文档树（或节点树）。
HTML文档中的每个元素、属性、文本等都代表着树中的一个节点。
树起始于文档节点，并由此继续伸出枝条，直到处于这棵树最低级别的所有文本节点为止。
当节点分享同一个父节点时，它们就是同辈（同级节点）。
节点也可以拥有后代，后代指某个节点的所有子节点，或者这些子节点的子节点。
节点也可以拥有先辈。先辈是某个节点的父节点，或者父节点的父节点，以此类推。

（3）节点属性

每个节点都拥有包含着关于节点某些信息的属性。这些属性是：
nodeName（节点名称）
元素节点的 nodeName 是标签名称
文本节点的 nodeName 永远是 #text
注释节点的 nodeName 永远是 #comment
文本节点，nodeValue 属性包含文本。
节点nodeValue元素节点nodeValue不可用不可用
nodeValue包括注释内容
nodeType（节点类型）

获取body后节点列表

document.body.childNodes

<p>a</p>
<form action="">
    <input type="text" name="user" id="">
    <input type="radio" name="sex" value="男" class="input1">
    <input type="radio" name="sex" value="女" class="input2">
</form>

<div id="div2">
    <span class="div1"></span>
    <span class="div1"></span>
</div>
<span class="div1"></span>

 console.log(document.body.childNodes);
//text, p, text, comment, text, script
 console.log(document.body.childNodes[1].nodeName==="P");
 //true

获取DOM元素

document.documentElement  //html标签
document.body //body 标签
document.title //标题
//所有的style标签列表和link标签列表有多少个样式style就有多少length

querySelector的用法

在js中可以通过标签选择器获取标签，现在发现还有querySelector可以实现选择器的功能。可以是标签名，也可以是类名。

<p id="demo" class="demo_1">单击按钮获取按钮元素的节点值。</p>
<button onclick="myFunction()">点我</button>
<script>
console.log(document.getElementById('demo'));
console.log(document.querySelector('.demo_1'));
console.log(document.querySelector('p'));

getElementsByTagName的用法

传回指定名称的元素集合。也就是一个数组集合，所以用的时候得注意这个后面指定是哪个元素。

var c=document.getElementsByTagName("BUTTON")[0];

节点遍历

<div id="div2">
    <span class="div1"></span>
    <span class="div1"></span>
</div>
console.log( div2.nextSibling);//#text
console.log(div2.childNodes);
//[text, span.div1, text, span.div1, text]

innerText可以设置转义字符和空格换行等，textContent只能设置其文本，不能含转义，传统的获取渲染会丢失对象

DOM树
CSS树
DOM渲染树
异步加载渲染树
数据驱动显示

传统点击事件重新渲染丢失对象元素

<div id="div1">
    <span>1</span>
</div>

var div1=document.querySelector("#div1");
var span=div1.querySelector("span");
span.onclick = function(){
    
     span.style.color = 'red'
}
div1.innerHTML+="<span>2</span>";
//这样会失去点击对象

dom创建元素直接添加渲染

不改变原来对象：

div id="div1">
    <span>1</span>
</div>

var span_1 = document.createElement('span')
span_1.textContent = '2'
div1.appendChild(span_1,span);
//创建一个dom对象(元素/标签）然后在给赋值
span.onclick = function(){
    
     span.style.color = 'red'
}
//不会失去捕获对象

创建碎片容器（js创建一个table）

<script>
    // table.tr.dd
    /* 首先创建一个元素table */
    var table = document.createElement('table')
    
    for(var i=0;i<100;i++){
    
        //创建tr对象标签
        var tr = document.createElement('tr')
        for(var j=0;j<10;j++){
    
            // 创建td对象标签
            var td = document.createElement('td')
            // 给td添加内容
            td.textContent = '1'
            // 追加在这个父标签的最后位
            tr.appendChild(td)
        }
        // 追加在这个父标签的最后位
        table.appendChild(tr)
    }
    console.log(table);
    document.body.appendChild(table)
</script>

创建100个div插入到body中

var elem=document.createDocumentFragment();//创建碎片容器
for(var i=0;i<100;i++){
    
    var div=document.createElement("div");
    elem.appendChild(div);
}
document.body.appendChild(elem);

创建文本结点插在第一个子元素的前面

<div id="div1">
    <span>1</span>
</div>
var txtNode=document.createTextNode("3");
div1.insertBefore(txtNode,div1.firstChild);

只有img标签才可以new 创建

var img=document.createElement("img");
//var img=new Image();
img.src="./img/img_21.JPG"
document.body.appendChild(img);
var img1=img.cloneNode(false);
document.body.appendChild(img1);

删除元素

span.remove();
// 父元素删除子元素
div1.removeChild(span);
// 清空元素所有内容
div1.innerHTML="";

替换元素

var p=document.createElement("p");
// 父元素.replaceChild(新元素，被替换的元素)
document.body.replaceChild(p,div1)
// 被替换的元素.replaceWith(新元素)
div1.replaceWith(p)

添加内容（数据驱动显示）版本一

无历史记录版本，纯dom操作

<input type="text"> <button>点击添加</button>
<ul></ul>
<script>
    var input,button,ul;
    init();

    function init(){
    
        /* 获取三个元素对象 */
        input = document.querySelector('input')
        button = document.querySelector('button')
        ul = document.querySelector('ul')
        /* 给button设置点击事件 */
        button.onclick = onclickHander;
    }
    function onclickHander(){
    
        /* 点击之后创建一个li元素 */
        var li = document.createElement('li') 
        console.log(input.value);
        li.textContent = input.value;
        ul.insertBefore(li,ul.firstChild);
        input.value = ''
    }
           
    </script>
</body>

数据驱动显示，碎片容器打包渲染（版本二）

<body>
    <input type="text"> <button>点击添加</button>
    <ul></ul>
    <script>
        var input,button,ul;
        var list =[];
        init();

        function init(){
    
            /* 获取三个元素对象 */
            // window.onpopstate = onclickHander;
            input = document.querySelector('input')
            button = document.querySelector('button')
            ul = document.querySelector('ul')
            // var li = history.state?
            /* 给button设置点击事件 */
            button.onclick = onclickHander;
        }
        function onclickHander(){
    
            /* 点击之后创建一个li元素 */
            // var li = document.createElement('li') 
            // console.log(input.value);
            list.push(input.value)
            upData();
            console.log(list);
            // ul.insertBefore(li,ul.firstChild);
            input.value = ''
            // history.pushState(li,li);
            // console.log(history.state);
        }
        function upData(){
    
            //每次渲染之前给ul清空内容
            ul.innerHTML = ''
            var emel = document.createDocumentFragment();
            for(var i=0;i<list.length;i++){
    
                var li = document.createElement('li');
                li.textContent = list[i];
                //每一次生成的li包裹在这emel胶囊中
                emel.appendChild(li)
            }
            ul.append(emel)    
        }
        
    </script>

新增删除按钮。添加属性标记条件，利于程序删除（版本三）

<input type="text"> <button>点击添加</button>
<ul></ul>
<script>
    var input,button,ul;
    var list =[];
    init();

    function init(){
    
        /* 获取三个元素对象 */
        // window.onpopstate = onclickHander;
        input = document.querySelector('input')
        button = document.querySelector('button')
        ul = document.querySelector('ul')
        // var li = history.state?
        /* 给button设置点击事件 */
        button.onclick = onclickHander;
    }
    function onclickHander(){
    
        /* 点击之后创建一个li元素 */
        // var li = document.createElement('li') 
        // console.log(input.value);
        if(!input.value){
    
            return;
        }
        list.push(input.value)
        upData();
        console.log(list);
        // ul.insertBefore(li,ul.firstChild);
        input.value = ''
        // history.pushState(li,li);
        // console.log(history.state);
    }
    function upData(){
    
        //每次渲染之前给ul清空内容
        ul.innerHTML = ''
        var emel = document.createDocumentFragment();
        for(var i=0;i<list.length;i++){
    
            var li = document.createElement('li');
            li.textContent = list[i];
            var bn = document.createElement('button');
            bn.innerHTML = '&times';
            bn.onclick = removeData;
            bn.i=i;
            li.append(bn)
            //每一次生成的li包裹在这emel胶囊中
            emel.appendChild(li)
        }
        ul.append(emel)    
    }
    function removeData(){
    
        list.splice(this.i,1)
        upData()
    }

添加history历史记录（版本四）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text"> <button>点击添加</button>
    <ul></ul>
        <script>
        var input,button,ul;
        var list =[];
        init();

        function init(){
    
            /* 初始化启动history监听 */
            window.onpopstate = changehistoryHander;
            input = document.querySelector('input')
            button = document.querySelector('button')
            ul = document.querySelector('ul')
            button.onclick = onclickHander;
            /* 历史第一次替换为list */
            history.replaceState(list,'a')
        }
        /* 把数据框的里值放在数组当中 */
        function onclickHander(){
    
            if(!input.value){
    
                return;
            }
            list.push(input.value)
            upData();
            console.log(list);   
            input.value = ''
            //添加历史状态
            history.pushState(list,'b')

       
        }
         /* 数据驱动显示 */
        function upData(){
    

            ul.innerHTML = ''
            var emel = document.createDocumentFragment();
            for(var i=0;i<list.length;i++){
    
                var li = document.createElement('li');
                li.textContent = list[i];
                var bn = document.createElement('button');
                bn.innerHTML = '&times';
                bn.onclick = removeData;
                bn.i=i;
                li.append(bn)
                emel.appendChild(li)
            }
            ul.append(emel)    
        }
        /* 过程中做好数据标识 */
        function removeData(){
    
            list.splice(this.i,1)
            history.pushState(list,'c')
            upData()
        }
        function changehistoryHander(){
    
            list = history.state;
            upData()
        }
    </script>
</body>
</html>

Dom属性

DOM 的对象属性 部分标签属性和对象属性是相通的
大部分系统默认的标签属性都是相通
自定义的标签属性是不相通的
class 是特殊的，在对象属性中使用className
表单\超链接的name与对象属性name相同，但是其他元素的name不相通

<div id="div1" class="div2" name="abc" title="div3" names="xietian" data-main="asds-asdwe"></div>
<input type="checkbox" name="user" checked>

<a href="" name="abc"></a>

DOM标签上的属性叫做标签属性

var div=document.querySelector("div");
console.log(div.style);//CSSStyleDeclaration
for(var i=0;i<div.style.length;i++){
    
    var key=div.style[i];
    console.log(key,div.style[key]);
//color blue
//width 100px
}

客户区大小

document.documentElement.clientWidth
document.documentElement.clientHeight
document.body.clientWidth
document.body.clientHeight

在这里插入代码片