type

Both NodeList and HTMLCollection are array-like elements, not arrays.

Static and dynamic

Name (NodeList), tagName (HTMLCollection), className (HTMLCollection) are all dynamic, and querySelectorAll (NodeList) is static

  • Dynamic refers to use after captureappendChildAdd a node without changing the variable
<html lang="en">
<body>
<div id="div1" class="container" name="name">
  <p>1</p>
  <p>2</p>
  <p>3</p>
</div>

<div id="div2" name="name">
  <p>Ha, ha, ha</p>
</div>

<script>
  const $div = document.createElement('div')
  $div.setAttribute('name'.'name')
    
  const $name = document.getElementsByName('name')
  console.log('by the name', $name)
    
  const $querySelectorAll = document.querySelectorAll('div')
  console.log('通过 querySelectorAll', $querySelectorAll)
    
  document.body.appendChild($div)
</script>
</body>
</html>
Copy the code

The $name here has a length of 3

.childnodes and children

ChildNodes and Children are attributes of 'HTMLCollection' or 'NodeList'Copy the code
  • ChildNodes can contain all node types(xx. NodeType)
  • Children contains only element nodes(ElementType)

ChildNodes, in this case, contains text nodes and element nodes (p)

Available methods

  • HTMLCollection: item, namedItem
  • NodeList: entries, forEach, item, keys, values