DOM的核心总结

1、创建元素的三种方式

• document.write ()

• element.innerHTML

• document.createElement ()

  区别

1. document.write直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘

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

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

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

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

    <script>
        // 三种创建元素方式区别 
        // 1. document.write() 创建元素  如果页面文档流加载完毕，再调用这句话会导致页面重绘
         var btn = document.querySelector('button');
         btn.onclick = function() {
             document.write('<div>123</div>');
         }
​
        // 2. innerHTML 创建元素
        var inner = document.querySelector('.inner');
         for (var i = 0; i <= 100; i++) {
             inner.innerHTML += '<a href="#">百度</a>'
         }
        var arr = [];
        for (var i = 0; i <= 100; i++) {
            arr.push('<a href="#">百度</a>');
        }
        inner.innerHTML = arr.join('');
        // 3. document.createElement() 创建元素
        var create = document.querySelector('.create');
        for (var i = 0; i <= 100; i++) {
            var a = document.createElement('a');
            create.appendChild(a);
        }
    </script>

 

2、innerTHML和createElement效率对比

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

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

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>

innerHTML数组方式（效率高）

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

 

3、 DOM的核心总结

文档对象模型(Document Object Model,简称DOM)，是W3C组织推荐的处理可扩展标记语言

(HTML或者XML)的标准编程接口。

W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式。

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

3.1. 创建

1. document.write

2. innerHTML

3. createElement

3.2. 增加

1. appendChild

2. insertBefore

3.3. 删

 removeChild

3.4. 改

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

1. 修改元素属性: src、 href、title等

2. 修改普通元素内容: innerHTML、 innerText

3. 修改表单元素: value、 type、 disabled等

4. 修改元素样式: style、 className

3.5. 查

主要获取查询dom的元素

1. DOM提供的API 方法: getElementByld、 getElementsByTagName 古老用法不太推荐

2. H5提供的新方法: querySelector、 querySelectorAll 提倡

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

3.6. 属性操作

主要针对于自定义属性。

1. sttribute:设置dom的属性值

2. getAttibut:得到dom的属性值

3. removettribute移除属性

3.7. 事件操作（重点）