Node

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

Document、Element、Attr、CharacterData(Text、Comment)、DocumentFragment、DocumentType

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循环

  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

  该节点的父节点Element

  nextSibling

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

  previousSibling

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

  主要方法

  appendChild()

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

  removeChild()

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

  // 💡 移除某个节点的所有子节点
  function removeChildren(element) {
    while(element.firstChild) {
      element.remove(element.firstChild)
  }
  }

  replaceChild()

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

  insertBefore()

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

  cloneNode()

  克隆一个Node

  hasChildNode()

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