js關於Dom的childNodes和childrens以及相關節點的獲取

本文為大家介紹js關於Dom的childNodes和childrens以及相關節點的獲取，有一定的參考價值，有需要的朋友可以參考一下，希望對你們有所幫助。

DOM-文件物件模型

Node類型 

每個DOM節點都有一個nodeType的屬性用來表示這個節點的型別。一共有12中類型，常見的ELEMENT_NODE=1;ATTRIBUTE_NODE=2;TEXT_NODE=3

範例

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

對於p節點而言​​，nodeType=1，nodeName=”p” nodeValue =null

(nodeName保存的是標籤名)

var p = document.getElementById("p")

P中關於node的屬性

P中還有一個childNodes屬性，其中保存在NodeList對象，NodeList是一種類別數組對象，用於保存一組有序的節點，可以透過位置來存取這些節點。雖然可以透過方括號語法來存取NodeList的值，而且這個物件也有length 屬性，但它並不是Array的實例。 NodeList物件的獨特指出在與它實際上是基於DOM結構動態執行查詢的結果，因此DOM結構的變化能夠自動反應在NodeList中。

對於節點而言還有一個屬性叫做childrens。根據《javascript高級程式設計》：由於IE9之前的其他版本與其他瀏覽器在處理文字節點中的空白符時有差異，因此久出現了children屬性。此屬性是HTMLCollection的實例，只包含元素中同樣還是元素的子節點。除此之外，二者沒有什麼差別。

根據上例，我們把p的childNodes和children都輸出看看

p.children

p.childNodes

可以看出

1.   二者是屬於不同的實例，children時HTMLCollection的實例，childNodes是childNodes的實例

2 .   children只包含了同樣是元素的孩子節點，而childNodes返回了元素的子元素集合，包括了HTML

節點，屬性節點，文字節點。可以透過nodeType來判斷是哪種類型的節點。只有當nodeType==1時候才是元素節點。 （2=屬性節點，3=文字節點）

關於childNodes的支援情況如下

##childNodes(i)支援

	##IE6-8/Safari/Chrome/Opera	#IE9/Firefox
		不支援

###################

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

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

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

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

操作节点

appendChild()

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

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

InsertBefore ()

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

ReplaceChild()

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

RemoveChild()

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

 注意：

1. 被删除和替换的节点仍然为文档所有，只不过在文档中已经没有了位置。

2. 以上的几种方法的操作，都是某个节点的子节点。也就是说要使用这些方法，需要先获得父节点

cloneNode()

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

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

相关推荐：

php公益培训视频教程

JavaScript图文教程

JavaScript在线手册

以上是js關於Dom的childNodes和childrens以及相關節點的獲取的詳細內容。更多資訊請關注PHP中文網其他相關文章！