DOM NodeList

DOM NodeList

概述

DOM NodeList 是指文档中所有匹配特定选择器的元素的集合。在JavaScript中，NodeList 通常通过 getElementsByTagName、getElementsByClassName 或 querySelectorAll 方法返回。NodeList 是一种轻量级的、动态的、可迭代的集合，它提供了多种方法来访问和操作集合中的元素。

NodeList 的特点

1. 动态性：当DOM发生变化时，NodeList 也会相应地更新。例如，如果添加或删除了元素，NodeList 中的元素数量和内容也会相应改变。
2. 可迭代性：NodeList 可以通过各种迭代器（如 forEach、for...of 循环）进行遍历。
3. 轻量级：与数组相比，NodeList 在内存占用上更为节省。

NodeList 方法

遍历 NodeList

const elements = document.querySelectorAll('.my-class');

elements.forEach((element, index) => {
  console.log(`Element ${index}: ${element}`);
});

添加元素

const newElement = document.createElement('div');
newElement.textContent = 'New Element';
document.body.appendChild(newElement);