前端基础知识之什么是节点Node？

极度狂热

发布于 2022-06-08 18:28:01

9140

文章被收录于专栏：极度狂热极度狂热

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
复制代码