Node是一个接口,各种类型的DOM API对象会从这个接口继承
Document
、Element
、Attr
、CharacterData(Text
、Comment
)、DocumentFragment
、DocumentType
CharacterData
抽象接口,代表Node
对象包含的字符
主要属性
nodeType
节点类型,如元素、文本、注释等
nodeName
nodeValue
textContent
childNodes
NodeList
节点的集合,通常由属性(Node.childNodes
)和方法(document.querySelectorAll
)返回
NodeList
是一个类数组的对象,可以使用forEach()
迭代,或者使用Array.from()
将其转换为数组📌 NodeList可能是实时的集合,也可能是静态的集合
Node.childNode
返回的是 实时 的,如果文档的节点树发生变化,NodeList
也会随之变化document.querySelectorAll
返回的是 静态 的,随后对文档对象进行任何改动都不会影响集合的内容
遍历NodeList
for循环
for (let i = 0; i < nodeList.length; ++i) {
// ...
}
// ❌ 不要使用 for...in 或者 for each...in,这样会将length 和 item属性也被遍历出来
for…of
let list = document.querySelector('input[type = checkbox]')
for (let checkbox of list) {
checkbox.checked = true
}
forEach()、entries()、values()、keys()
firstChild
lastChild
parentNode
nextSibling
previousSibling
主要方法
appendChild()
将指定的childNode参数作为最后一个子节点添加到当前节点
removeChild()
移除当前节点的第一个子节点
// 💡 移除某个节点的所有子节点
function removeChildren(element) {
while(element.firstChild) {
element.remove(element.firstChild)
}
}
replaceChild()
insertBefore()
cloneNode()
hasChildNode()
返回一个
Boolean
值,表示该节点是否包含子节点