和我一起学DOM（第三篇）-原创手记-慕课网

1、节点内容的补充

    1.1、childNodes：获取所有的孩子节点（包括了元素节点和其他很多类型的节点，基本不常用）

        children：获取所有的子元素（用途很广泛）。

    1.2：JavaScript:void(0)的作用
            javascript:是伪协议，表示url的内容通过JavaScript执行。void(0)表示不作任何操作，这样会防止链接跳转到其他页面。让页面不跳转，JavaScript：void（0）是最通用的方式。

2、style操作样式

    标签不仅可以通过class属性操作样式，还可以通过style属性操作样式。同样的DOM对象可以通过className操作样式，也可以通过style属性操作样式。

        DOM对象中的style属性详解。

        1：style属性是一个对象；

        2：style这个对象中属性值都是字符串格式；

        3：标签中style属相有哪些样式名，在style这个对象中就有对应的属性名；

        4：标签中有一些属性带了，比如background-color在style对象中变成了驼峰命名法，backgroundColor（因为在js中横线不是一个合法的标识符）；

        5：DOM中的style属性只能获取和设置行内样式，在类样式中定义的样式通过style获取不到。

3、透明度的设置(两种小方法)

                        var father = document.getElementById("father");
                        father.style.opacity="o.5";
                        father.style.filter="alpha(opacity=50)";

4、克隆元素

    node.cloneNode(deep)：cloneNode方法在内存中克隆一份node节点。

    deep：表示是否采用深度克隆。

            true：深度克隆，该节点以及所有的后代节点都会被克隆；

            false：浅度克隆，只会克隆节点本身。

            如果克隆的节点有id，为了避免id的冲突，需要重新制定id。

5、插入节点

    5.1：parent.appendChild（child）：将一个节点插入到指定的父节点的最末尾处（也就是成为了这个父节点的最后一个子节点）。

        node：父节点；

        child：子节点。

        var box = document.getElementById("box");
        var p = document.getElementById("content");
        box.appendChild(p);  //将页面中的p添加到box中去

    5.2：parent.inserBefore（newChild，refChild）：在parent节点的refChild之前在插入一个子节点，一般用于插入到最前面。

        parent：父节点；

        newChild：要插入的节点；

        refChild：插入的节点的位置（插入到这个节点的前面）。

    5.3：removeChild (node)：移除子节点

            var box = document.getElementById("box");
            var p = document.getElementById("content");
            box.removeChild(p);  //移除子节点

6、动态创建元素

    6.1、为什么要动态元素？

        因为在页面加载的时候，并不需要把所有的内容都加载好，只有当我们需要访问或者使用的时候，在进行加载，这样加载的速度会更加快速。

        页面中有一些内容是需要实时变化的，不能写死，只能通过后台数据动态生成的。

    6.2、动态创建元素的方式

        第一种：document.write（）；往页面中写内容，缺点：如果文档已经加载好了，会把之前的页面覆盖掉。因此用的比较少.

                        document.write("
                            <ul>
                                <li></li>
                            </ul>   
                        ");

        第二种：element.innerHTML：执行过程：现在内存中，解析标签，生成对象；把元素之前的对象干掉；将生成的对象添加到元素上，交给渲染引擎，页面展示。

                    element.innerHTML="
                        <ul>
                            <li></li>
                        </ul>   
                    "

        第三种：document.createElement（“tagName”）：在内存中生成一个对象。

                var ul = document.createElement("ul");

7、动态创建的效率问题

        1：不要大量使用innerHTML创建元素，效率会很低，解决方案：先使用数组进行拼串，最后在使用innerHTML渲染一次就行；

        2：正确的使用innerHTML方式与appendChild方式创建元素效率都很快；

        3：使用innerHTML清空元素如果有事件的时候会出现内存泄漏的问题，这个时候应该使用removeChild方法。

**什么时候使用innerHTML？什么时候使用appendChild？

        1：如果不需要针对每一个新增加的元素做操作，就会用innerHTML即可；

        2：如果需要对新增的元素设置属性或者样式，那么使用appendChild更加方便；   

        3：一般情况下，两种方式都没问题，灵活运用即可。