DOM的核心总结

关于dom操作，我们主要针对于元素的操作。主要有创建、增、删、改、查、属性操作、事件操作。

1、创建

document.write

innerHTML

createElement

区别：

1. document.write 是直接将内容写入页面的内容流，界面加载完成之后，再写入，这样它会导致页面全部重绘

2. innerHTML 是将内容写入某个 DOM 节点，不会导致页面全部重绘

3. innerHTML 创建多个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂

4. createElement() 创建多个元素效率稍低一点点，但是结构更清晰

5. 总结：不同浏览器下，innerHTML 效率要比 creatElement 高

1.1 createElement方式（效率一般，但结构清晰）

    <script>
        function fn() {
            var d1 = +new Date();
            for (var i = 0; i < 1000; i++) {
                var div = document.createElement('div');
                div.style.width = '100px';
                div.style.height = '2px';
                div.style.border = '1px solid red';
                document.body.appendChild(div);
             }
                var d2 = +new Date();
                console.log(d2 - d1);
        }
        fn();
    </script>

1.2 innerHTML字符串拼接方式（效率低）

    <script>
        function fn() {
            var d1 = +new Date();
            var str = '';
            for (var i = 0; i < 1000; i++) {
                document.body.innerHTML += '<div style="width:100px; height:2px; border:1px solid blue;"></div>';

            }
            var d2 = +new Date();
            console.log(d2 - d1);
        }
        fn();
    </script>

总结：上述操作相当于字符串拼接，而字符串不可变性导致没拼接一次开辟一个变量空间，所以效率低下

1.3 innerHTML数组方式（效率高）

    <script>
        function fn() {
            var d1 = +new Date();
            var array = [];
            for (var i = 0; i < 1000; i++) {
                array.push('<div style="width:100px; height:2px; border:1px solid blue;">            
                </div>');
            }
            document.body.innerHTML = array.join('');
            var d2 = +new Date();
            console.log(d2 - d1);
        }
        fn();
    </script>

2、增加

2.1 末尾添加：element.appendChild(childNode)

       将 childNode 添加到element的子节点列表的末尾 （追加）

2.2 指定位置添加：element.insertBefore(childNode, 指定元素)

              将childNode 添加到element的指定元素的前面

    <ul>
        <li>123</li>
    </ul>
    <script>
        // 1. 创建节点元素节点
        var li = document.createElement('li');
        // 2. 添加节点 node.appendChild(child)  node 父级  child 是子级 后面追加元素
        var ul = document.querySelector('ul');
        ul.appendChild(li);
        // 3. 添加节点 node.insertBefore(child, 指定元素);
        var li2 = document.createElement('li');
        ul.insertBefore(li2, ul.children[0]);
        // 4. 我们想要页面添加一个新的元素 ： 1. 创建元素 2. 添加元素
    </script>

3、删

3.1 node.removeChild(child)

        说明：node.removeChild() 方法从 node节点中删除一个子节点，返回删除的节点。

    <button>删除</button>
    <ul>
        <li>熊大</li>
        <li>熊二</li>
        <li>光头强</li>
    </ul>
    <script>
        // 1.获取元素
        var ul = document.querySelector('ul');
        var btn = document.querySelector('button');
        // 2. 删除元素  node.removeChild(child)
        // ul.removeChild(ul.children[0]);
        // 3. 点击按钮依次删除里面的孩子
        btn.onclick = function() {
            if (ul.children.length == 0) {
                this.disabled = true;
            } else {
                //注意：每次点击都是删除第一个
                //第一次删除3个里边的第一个，删除之后原来的1,2变为0,1，所以在次删除还是删除0
                ul.removeChild(ul.children[0]);
            }
        }
    </script>

4、改

主要修改dom的元素属性，dom元素的内容、属性, 表单的值等

4.1 修改元素属性： src、href、title等

4.2. 修改普通元素内容： innerHTML 、innerText

4.3. 修改表单元素： value、type、disabled等

4.4. 修改元素样式： style、className

5、查

主要获取查询dom的元素

5.1 DOM提供的API 方法：  getElementById、getElementsByTagName  古老用法 不太推荐

5.2 H5提供的新方法： querySelector、querySelectorAll   提倡

5.3 利用节点操作获取元素： 父(parentNode)、子(children)、兄(previousElementSibling、nextElementSibling)    提倡

6、属性操作

主要针对于自定义属性：一组元素中（同一个父亲），每个元素他自己不知道自己排行老几，设置自定义属性，来排行。

6.1 设置dom的属性值

6.1.1 设置元素自带属性，通过点语法：element.属性='属性值'

    div.id = 'test';
    div.className = 'navs';

6.1.2 设置自定义属性，通过方法：element.setAttribute('属性','属性值');

    div.setAttribute('index', 2);
    div.setAttribute('class', 'footer');

注：div.setAttribute('class', 'footer'); // class 特殊  这里面写的就是class （也可以设置自带属性，但是麻烦）

6.2 得到dom的属性值

6.2.1 获取元素自带属性，通过点语法：element.属性：

    <div id="demo" index="1" class="nav"></div>
    <script>
        var div = document.querySelector('div');
        // 1. 获取元素的属性值
        // (1) element.属性
        console.log(div.id);
    <script>

6.2.1 获取自定义属性，通过方法：element.getAttribute('属性')：

注：getAttribute也可以获取自带属性，但是没有点语法方便

6.3 移除属性

6.3.1 移除自定义属性语法：element.removeAttribute('属性值')

    // 移除属性 removeAttribute(属性)    
    div.removeAttribute('index');
    div.removeAttribute('id');

注意：可以移除所有属性：自带和自定义

6.3.1 移除的作用：属性和属性值都没了

    <div style="background-color:red"  id="id"></div>
    //赋值为空字符串：属性还在，但是值没了
    div.id= "";//<div style="background-color:red"  id=""></div>
    div.setAttribute('id','');//<div style="background-color:red"  id=""></div>
    //移除效果： 这个属性没了
    div.removeAttribute('id') //<div style="background-color:red"  ></div>

 

7、 事件操作（重点）

给元素注册事件， 采取  事件源.on事件类型 = 事件处理程序