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

1、创建

document.write

innerHTML

createElement

区别：

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

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

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

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

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

2、增加

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

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

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

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

3、删

3.1 node.removeChild(child)

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

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.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>

7、 事件操作

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