JavaScript DOM重点核心

1. DOM概念

文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。

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

1. 对于JavaScript，为了能够使JavaScript操作HTML，JavaScript就有了一套自己的dom编程接口。

2. 对于HTML，dom使得html形成一棵dom树.  包含 文档、元素、节点

我们获取过来的DOM元素是一个对象（object），所以称为 文档对象模型

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

2.1创建

    <button>点击</button>
    <p>abc</p>
    <div class="inner"></div>
    <div class="create"></div>

2.1.1 document.write

    // 1. document.write() 创建元素  如果页面文档流加载完毕，再调用这句话会导致页面重绘
    var btn = document.querySelector('button');
    btn.onclick = function() {
        document.write('<div>123</div>');
    }

2.1.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(''); //arr.join('') 数组转换为字符串后没有任何符号分割！

2.1.3 creatElement

 
    // 3. document.createElement() 创建元素   效率低于innerHTML的数组拼接形式，但是结果更清晰。
    var create = document.querySelector('.create');
    for (var i = 0; i <= 100; i++) {
        var a = document.createElement('a');
        create.appendChild(a);
    }