[TOC] # children和childNodes **1，childNodes 屬性**，標準的，它返回指定元素的子元素集合，包括HTML節點，所有屬性，文本。可以通過nodeType來判斷是哪種類型的節點，只有當nodeType==1時才是元素節點，2是屬性節點，3是文本節點。 有些人錯誤的使用()去取該集合元素，下表列出各瀏覽器對childNodes(i)的支持情況： **2，children 屬性**，非標準的，它返回指定元素的子元素集合。經測試，它只返回HTML節點，甚至不返回文本節點。且在所有瀏覽器下表現驚人的一致。和childNodes 一樣，在Firefox下不支持()取集合元素。因此如果想獲取指定元素的第一個HTML節點，可以使用children\[0\]來替代上面的getFirst函數。需注意children在IE中包含注釋節點。 # 節點操作 ~~~ var body = document.body; var div = document.createElement('div'); body.appendChild(div); var firstEle = body.children[0]; body.insertBefore(div, firstEle); body.removeChild(firstEle); var text = document.createElement('p'); body.replaceChild(text, div); ~~~ # 節點屬性 * nodeType 節點的類型 * 1 元素節點 * 2 屬性節點 * 3 文本節點 * nodeName 節點的名稱(標簽名稱) * nodeValue 節點值 * 元素節點的nodeValue始終是null ## 模擬文檔樹結構   ## 節點層級 重點講父子屬性，兄弟屬性畫圖講解 ~~~ var box = document.getElementById('box'); console.log(box.parentNode); console.log(box.childNodes); console.log(box.children); console.log(box.nextSibling); console.log(box.previousSibling); console.log(box.firstChild); console.log(box.lastChild); ~~~ * 注意 childNodes和children的區別，childNodes獲取的是子節點，children獲取的是子元素 nextSibling和previousSibling獲取的是節點，獲取元素對應的屬性是nextElementSibling和previousElementSibling獲取的是元素 ? nextElementSibling和previousElementSibling有兼容性問題，IE9以后才支持 * 總結 ~~~ 節點操作，方法 appendChild() insertBefore() removeChild() replaceChild() 節點層次，屬性 parentNode childNodes children nextSibling/previousSibling 兄弟節點 nextElementSibling 兄弟元素 firstChild/lastChild ~~~ # 元素和節點的區別 ~~~ <a>abc</a> ~~~ 元素(Element)是節點(Node)的一種 `<a>`是個元素，也是一個節點 abc不是元素，是文本節點 # 獲取首元素,兼容性 在火狐上有一些不支持, 可以用下面的辦法 ~~~ <div id="box"> <div>這是一個廣告圖片</div> <ul> <li>這是一個列表</li> </ul> <span>說明性文字</span> </div> <script> // box.firstChild 獲取第一個子節點 // box.firstElementChild 獲取第一個子元素， 有兼容性問題，從IE9以后支持 // // box.lastChild 獲取最后一個子節點 // box.lastElementChild 獲取最后一個子元素， 有兼容性問題，從IE9以后支持 var box = document.getElementById('box'); // console.log(box.firstChild); // console.log(box.firstElementChild); var ele = getFirstElementChild(box); console.log(ele); // 處理瀏覽器兼容性 function getFirstElementChild(element) { var node, nodes = element.childNodes, i = 0; while (node = nodes[i++]) { if (node.nodeType === 1) { return node; } } return null; } </script> ~~~ # 代碼 ## 文檔樹 ~~~ <div id="box">hello</div> <p id="p">world</p> <!-- 這是注釋 --> <script> var box = document.getElementById('box'); console.dir(box); // 創建一些列具有相同屬性的對象，構造函數 // 獲取對象沒有的屬性，屬性的值是undefined function Node(options) { // 設置屬性的默認值 this.className = options.className || ''; this.id = options.id || ''; // 跟節點相關的屬性 // 節點的名稱，如果是元素的節點的話，是標簽的名稱 this.nodeName = options.nodeName || ''; // 節點的類型 如果是元素節點 1 屬性節點 2 文本節點 3 數值類型 this.nodeType = options.nodeType || 1; // 記錄節點的值，如果是元素節點，始終是null this.nodeValue = options.nodeValue || null; // 記錄子節點 this.children = options.children || []; } // 創建html節點 var html = new Node({ nodeName: 'html' }); // 創建head節點 var head = new Node({ nodeName: 'head' }); // 設置html中的子節點 head html.children.push(head); // console.dir(html) // body var body = new Node({ nodeName: 'body' }) // 設置html中的子節點 body html.children.push(body); // div var div = new Node({ nodeName: 'div' }) // p var p = new Node({ nodeName: 'p' }) // 設置body的子節點 body.children.push(div); body.children.push(p); console.dir(html); </script> ~~~ ## 父子節點和元素 ~~~ <div id="box"> <span>span</span> <p>p標簽</p> <!-- 這里是注釋 --> </div> <script> var box = document.getElementById('box'); console.dir(box) // 節點的層次結構 // 父子結構 // parentNode 父節點 只有一個 // childNodes 子節點 有很多個 // children 子元素 var box = document.getElementById('box'); console.log(box.parentNode); console.log(box.childNodes); // 屬性節點、元素節點、文本節點、注釋節點 for (var i = 0; i < box.childNodes.length; i++) { // 找到box中所有的子元素 var node = box.childNodes[i]; // 判斷當前的子節點是否是元素節點 if (node.nodeType === 1) { console.log(node); } } // // // 有沒有能夠直接獲取子元素的屬性？ children var box = document.getElementById('box'); console.log(box.children); // 所有的子元素 </script> ~~~