JavaScript之DOM

Posted 2020-10-17 sminocence

DOM中比较常用的类型有Element类型，Text类型，Attr类型，Comment类型（注释），Document类型（文档），DocumentFragment类型。

Element类型

提供了对元素标签名，子节点，特性的访问。
nodeType：1
nodeName：元素标签名，tagName也是返回标签名。
nodeValue：null。
parentNode：可能是Element或者是Document。
子节点可能是Element，Text，Comment等

Text类型

表示文本节点，包含的是纯文本内容，不能包含html代码，但可以包含转义之后的html代码。
nodeType：3
nodeName：#text
nodeValue:文本内容
parentNode：是一个Element。
没有子节点

Attr类型

Attr类型表示元素的特性，相当于元素的attributes属性中的节点。
nodeType:2
nodeName:特性的名称
nodeValue:特性的值
parentNode：null。

Node类型

childNodes属性

每个节点都有一个childNodes属性，其中保存着一个NodeList对象，NodeList对象是一种类数组对象，用于保存一组有序的节点，可以通过位置来访问这些节点。虽然这个对象有length属性 ，但是它不是Array的实例。NodeList对象的独特之处在于，它实际上是基于DOM结构动态执行查询的结果，因此DOM结构的变化能够自动反应在NodeList对象中，
关键点：
将arguments对象使用Array.prototype.slice方法可以将其转换为数组。所以我们也可以将NodeList对象转换为数组。

var arrayOfNodes = Array.prototype.slice.call(someNode.childNodes,0);

//所有浏览器
function covertToArray(nodes){
    var array = null;
    try{
        array = Array.prototype.slice.call(nodes,0)l;
    }catch(ex){
        array = new Array();
        for (var i=0,len = nodes.length;i<len;i++){
            array.push(nodes[i]);
        }
    }

    return array;
}

parentNode属性

当然除了childNodes属性还有parentNode属性，该属性指向文档树中的父节点。
包含在childNodes列表中的所有节点都有相同的父节点，因此它们的parentNode属性都指向同一个节点。childNodes列表中的每一个节点相互之间都是同胞节点，可以使用列表中每一个节点的previousSibling和nextSibling属性，可以访问到同一列表中的其他节点。还有firstChild和lastChild属性。当这两个属性值相等的时候，childNodes列表中只有一个节点。

ownerDocument属性，

节点创建方法

1.createElement("div"),传入标签名
2.createTextNode("个人个人");传入文本。
3.cloneNode(true/false):这个方法是返回调用这个方法的节点的一个副本，如果参数为true，表示复制子元素。否则不会复制子元素。
这里有一个注意点：如果被复制的节点绑定了事件，则副本也会跟着绑定该事件吗？这里分情况讨论
（1）如果是通过addEventListener或者是onclick进行绑定事件，则副本节点不会绑定该事件。
（2）如果是内联方式绑定的：

<div onclick="show()"></div>

这样的话，副本节点同样会触发事件。

4.createDocumentFragment
这个方法是用来创建一个DocumentFragment。DocumentFragment表示一种轻量级的文档，主要作用是存储临时性的节点用来准备添加到文档中的。
createDocumentFragment方法主要是用来添加大量节点到文档中时会使用到。假设要循环一组数据，然后创建多个节点添加到文档中，

<ul id="list"></ul>
<input type="button" value="添加多项" id="btnadd">

<script type="text/javascript">
    document.getElementById("btnadd").onclick = function(){
        var list = document.getElementById("list");
        for(var i=0;i<100;i++){
            var li = document.createElement("li");
            li.textContent = i;
            list.appendChild(li);
        }
    }
    /*但是上面的代码会造成回流，这时候就需要用到createDocumentFragment方法*/
    document.getElementById("btnadd").onclick = function(){
        var list = document.getElementById("list");
        var fragment = document.createDocumentFragment();

        for(var i=0;i<100;i++){
            var li = document.createElement("li");
            li.textContent = i;
            fragment.appendChild(li);
        }

        list.appendChild(fragment);
    }
</script>

DocumentFragment不是文档树的一部分，它是保存在内存中的，所以不会造成回流问题。先将生成的li节点添加到fragment，最后一次性添加到list。

创建型API总结

主要包括这几个方法：createElemnt，createTextNode，cloneNode，createDocumentFragment四个方法。
需要注意下面几个点：
（1）他们创建的节点都只是一个孤立的节点，要通过appendChild添加到文档中。
（2）cloneNode要注意如果被复制的节点是否包含子节点以及事件绑定等问题。
（3）使用createDocumentFragment来解决添加大量节点时的性能问题。