childNodes詳解

時間 2019-12-08

標籤 childnodes 詳解简体版

原文原文鏈接

定義和用法

childNodes 屬性返回節點的子節點集合，以 NodeList 對象。html

提示：您可使用 length 屬性來肯定子節點的數量，而後您就可以遍歷全部的子節點並提取您須要的信息。node

瀏覽器支持

全部主流瀏覽器都支持 childNodes 屬性。數組

語法

element.childNodes

技術細節

返回值：	NodeList 對象，表示節點集合。
DOM 版本	Core Level 1

以上是定義來着w3cschool.com瀏覽器

DOM中節點的類型

DOM中一共有12中類型。可是咱們經常使用的只有幾種。dom

首先咱們瞭解下DOM中通常常見的節點類型有哪些？學習

一、元素節點

DOM中的原子都是元素節點，好比<body><table><div>等等。測試

若是把Web上的文檔比做一座大廈，則元素就是構成這塊大廈的磚石。一個文檔是由N個元素組成的。元素可包含其餘元素。ui

二、文本節點

任意的文字、空格、換行、空白行都算是文本節點。spa

三、屬性節點

屬性節點，故名思議就是其餘節點的屬性。例如全部的元素都有title屬性，在title='title1'就是一個屬性節點。code

四、註釋節點

就是註釋了。

childNodes包含了哪些節點？

由childNodes屬性返回的數組中包含着全部類型的節點，全部的屬性節點和文本節點也包含在其中。（這一點存在疑問,下面有解釋）

事實上，文檔裏幾乎每同樣東西都是一個節點，甚至連空格和換行符都會被解釋成節點。並且都包含在childNodes屬性所返回的數組中。

chidNoeds返回的事node的集合，

每一個node都包含有nodeType屬性。

nodeType取值：

元素節點：1

屬性節點：2

文本節點：3

註釋節點：8

測試

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script> window.onload = function () { console.log("body的childNodes"); var oItems = document.body.childNodes; for (var i = 0; i < oItems.length; i++) { console.log("nodeType:" + oItems[i].nodeType); console.log("nodeName:" + oItems[i].nodeName); console.log("nodeValue:'" + oItems[i].nodeValue + "'"); } console.log("h1的childNodes"); getChildNodesAtrr(document.getElementsByTagName("h1")[0]); console.log("span的childNodes"); getChildNodesAtrr(document.getElementsByTagName("span")[0]); console.log("div的childNodes"); getChildNodesAtrr(document.getElementsByTagName("div")[0]); }; function getChildNodesAtrr(dom) { var oItems = dom.childNodes; for (var i = 0; i < oItems.length; i++) { console.log("nodeType:" + oItems[i].nodeType); console.log("nodeName:" + oItems[i].nodeName); console.log("nodeValue:'" + oItems[i].nodeValue + "'"); } } </script>
</head>
<body>
    <h1>h1</h1>
    <span>span</span>
    <!--這是一個註釋--> 123 <div class="class1" title="title1"></div>
</body>
</html>

最終控制檯的輸出結果：

body的childNodes
nodeType:3
nodeName:#text
nodeValue:'
'
nodeType:1
nodeName:H1
nodeValue:'null'
nodeType:3
nodeName:#text
nodeValue:'
'
nodeType:1
nodeName:SPAN
nodeValue:'null'
nodeType:3
nodeName:#text
nodeValue:'
'
nodeType:8
nodeName:#comment
nodeValue:'這是一個註釋'
nodeType:3
nodeName:#text
nodeValue:'
123
'
nodeType:1
nodeName:DIV
nodeValue:'null'
nodeType:3
nodeName:#text
nodeValue:'