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 capture
appendChild
Add 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