前端基础知识之什么是节点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的方法