第105题 HTMLCollection和NodeList的区别

Node和Element

• DOM是一棵树，所有节点都是Node
• Node是Element的基类
• Element是其他HTML元素的基类，如HTMLDivElement、HTMLImageElement等

• HTMLCollection是Element的集合
• NodeList是Node的集合，包含Text和Comment节点
• ele.children 返回HTMLCollection集合
• ele.childNodes 返回NodeList集合
• HTMLCollection和NodeList是类数组
  • 使用Array.from(list)转化数组
  • 使用Array.prototype.slice.call(list)转化数组
  • 使用[...list]转化数组

    <p id="p1"><b>node</b> vs <em>element</em><!--注释--></p>
    
    <script>
      const p1 = document.getElementById('p1')
      // console.log(p1.children) // HTMLCollection
      console.log(p1.childNodes) // NodeList
    
      // p1.tagName // Element类型一定有tagName
      // p1.nodeType/nodeName // node节点
    
      class Node {}
    
      // document
      class Document extends Node {}
      class DocumentFragment extends Node {}
      
      // 文本和注释
      class CharacterData extends Node {}
      class Comment extends CharacterData {}
      class Text extends CharacterData {}
    
      // elem
      class Element extends Node {}
      class HTMLElement extends Element {}
      class HTMLDivElement extends HTMLElement {}
      class HTMLInputElement extends HTMLElement {}
      // ...
    </script>