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去轉為陣列進行遍歷。
相關文章：