前端基礎知識之什麼是節點Node？

Node是什麼？

是一個接口。 許多DOM API都會繼承於它，如document, Element document.getElementById 的返回值就是一個繼承於Node的對象 經常使用的API有：

Node.childNodes只讀 返回一個該節點全部的即時更新的NodeList

Node.nodeName只讀 返回節點名，如 DIV, IMG

Node.lastChild只讀 最後一個Node，若沒有則是null

Node.firstChild只讀 第一個Node，若沒有則是null

NodeList是什麼？

它是一個節點的集合，能夠經過document.querySelectorAll返回一組靜態的NodeList。 如，

const parentNode = document.getElementById('content')
const nodeList = parentNode.querySelectorAll('div')
console.log(nodeList)  // 假設這裏的值是5
const newElement = document.createElement('div')
parentNode.append(newElement) // 插入一個DOM
console.log(nodeList) // 這裏的nodeList還是5
複製代碼

也能夠經過 Node.childNodes返回一組動態的NodeList Node.childNodes/返回包含指定節點的子節點的集合，該集合爲即時更新的集合（live collection）。/

const parentNode = document.getElementById('content')
const nodeList = parentNode.childNodes
console.log(nodeList)  // 假設這裏的值是5
const newElement = document.createElement('div')
parentNode.append(newElement) // 插入一個DOM
console.log(nodeList) // 這裏的nodeList會變爲6
複製代碼

那麼要如何遍歷Node呢？

查看Node的原型鏈，它並無繼承於Array，因此它不具備Array的方法。 可是，除非在特別老的瀏覽器下，不然它如今都具備forEach的方法，你也能夠用Array.from去轉爲數組進行遍歷。

相關文章：

一次完整的web請求和渲染過程以及如何優化網頁

前端基礎知識之什麼是節點Node？

前端頁面優化，減小reflow的方法