js about the acquisition of Dom's childNodes and childrens and related nodes-JS Tutorial-php.cn

This article will introduce to youjs about the acquisition of Dom's childNodes and childrens and related nodes. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

DOM-Document Object Model

Node Type

Each DOM node has a nodeType attribute to represent the type of the node. There are 12 types in total, the common ones are ELEMENT_NODE=1;ATTRIBUTE_NODE=2;TEXT_NODE=3

Example

<p>
    p
    </p><p>
        doughter
    </p>
    <p>
        son
    </p>
    <p>
        cousin
    </p>

Copy after login

For the p node, nodeType=1, nodeName="p" nodeValue =null

(nodeName saves the tag name)

var p = document.getElementById("p")

Copy after login

The attributes of node in P

js about the acquisition of Doms childNodes and childrens and related nodes

##There is also a childNodes in P Properties, which are stored in the NodeList object. NodeList is an array-like object used to save an ordered set of

nodes, which can be accessed by location. Although the value of NodeList can be accessed through square bracket syntax, and this object also has a length property, it is not an instance of Array. The unique point of the NodeList object is that it is actually the result of dynamically executing a query based on the DOM structure, so changes in the DOM structure can be automatically reflected in the NodeList.

There is also an attribute called childrens for nodes. According to "Javascript Advanced Programming": Due to differences between other versions before IE9 and other browsers in handling whitespace characters in text nodes, the children attribute has appeared for a long time. This attribute is an instance of HTMLCollection and only contains child nodes

that are also elements in the element. Other than that, there is no difference between the two.

Based on the above example, let’s output both the childNodes and children of p

p.children

js about the acquisition of Doms childNodes and childrens and related nodes

p.childNodes

js about the acquisition of Doms childNodes and childrens and related nodes

It can be seen that

1. The two belong to different instances, children is an instance of HTMLCollection, and childNodes is an instance of childNodes

2 . children only contains child nodes that are also elements, and childNodes returns a collection of child elements of the element, including HTML

nodes, attribute nodes, and text nodes. You can use nodeType to determine what type of node it is. It is an element node only when nodeType==1. (2=attribute node, 3=text node)

The support for childNodes is as follows

##childNodes(i)Supported

可以通过一下方法进行转化

var arr = Array.prototype.slice.call(p.childNodes,0);
    arr.filter((item,index)=>(
        item.nodeType===1
))

Copy after login

除了孩子关系，节点还存在父子关系，兄弟关系

js about the acquisition of Doms childNodes and childrens and related nodes

通过以上属性获得的节点不一定是元素类型。可能是text等。（如果不存在的为null）如果希望获得元素类型的节点，对DOM的扩展中提供了获取元素类型节点的方法

js about the acquisition of Doms childNodes and childrens and related nodes

操作节点

appendChild()

用于向childNodes列表的末尾添加一个节点。添加后childNodes的新增节点，父节点及以前的最后一个节点的关系指针会更新。完成更新后返回值是新增节点。

如果传入appendChild中的节点已经是文档的一部分了，那么结果就是将该节点从原来的位置移到新的位置。

InsertBefore ()

InsertBefore ()接受两个参数：要插入的节点和作为参照的节点。插入节点后，被插入的节点回变成参照节点的前一个同胞节点，同时被返回。如果参照节点为null，则和appendChild没有区别

ReplaceChild()

ReplaceChild()接收两个参数：要插入的节点和要替换的节点。要替换的节点将由这个方法返回并且删除，同时要插入的节点占据它的位置

RemoveChild()

删除一个节点，参数是要移除的节点

注意：

被删除和替换的节点仍然为文档所有，只不过在文档中已经没有了位置。
以上的几种方法的操作，都是某个节点的子节点。也就是说要使用这些方法，需要先获得父节点

cloneNode()

拷贝一个节点，接受一个参数，true=深复制（也就是复制节点以及整个子节点树）；false=浅复制（只复制当前节点）

总结：以上就是本篇文的全部内容，希望能对大家的学习有所帮助。更多相关教程请访问JavaScript视频教程！

	IE6-8/Safari/Chrome/Opera	IE9/Firefox
		Not supported