Node是一个接口,各种类型的DOM API对象会从这个接口继承

DocumentElementAttrCharacterData(TextComment)、DocumentFragmentDocumentType

CharacterData 抽象接口,代表Node对象包含的字符

主要属性

nodeType

节点类型,如元素、文本、注释等

📌节点类型常量

nodeName

节点名字

nodeValue

节点的值

textContent

元素的字节点及其后代的文本内容

childNodes

节点的所有子节点实时NodeList

NodeList

节点的集合,通常由属性(Node.childNodes)和方法(document.querySelectorAll)返回

NodeList 是一个类数组的对象,可以使用 forEach() 迭代,或者使用Array.from()将其转换为数组

📌 NodeList可能是实时的集合,也可能是静态的集合

  • Node.childNode返回的是 实时 的,如果文档的节点树发生变化,NodeList也会随之变化
  • document.querySelectorAll返回的是 静态 的,随后对文档对象进行任何改动都不会影响集合的内容

遍历NodeList
  • for循环

    1. for (let i = 0; i < nodeList.length; ++i) {
    2. // ...
    3. }
    4. // ❌ 不要使用 for...in 或者 for each...in,这样会将length 和 item属性也被遍历出来
  • for…of

    1. let list = document.querySelector('input[type = checkbox]')
    2. for (let checkbox of list) {
    3. checkbox.checked = true
    4. }
  • forEach()entries()values()keys()

    firstChild

    该节点的第一个子节点

    lastChild

    该节点的最后一个子节点

    parentNode

    该节点的父节点Element

    nextSibling

    与该节点同级的下一个节点Node

    previousSibling

    该节点同级的前一个节点Node

    主要方法

    appendChild()

    将指定的childNode参数作为最后一个子节点添加到当前节点

    removeChild()

    移除当前节点的第一个子节点

    1. // 💡 移除某个节点的所有子节点
    2. function removeChildren(element) {
    3. while(element.firstChild) {
    4. element.remove(element.firstChild)
    5. }
    6. }

    replaceChild()

    对选定的节点,替换一个子节点Node为另外一个节点

    insertBefore()

    在当前节点下增加一个子节点,并使该子节点位于参考节点的前面

    cloneNode()

    克隆一个Node

    hasChildNode()

    返回一个Boolean值,表示该节点是否包含子节点