javascript 使用 NodeList需要注意的问题

当我们在使用JavaScript的DOM操作时，常常会遇到返回NodeList类型的情况，例如使用querySelectorAll()方法、通过节点对象的childNodes属性或parentElement.children属性来获取子节点等等。但是NodeList与数组有着相似的使用方法，却存在一些需要注意的问题。

NodeList不是数组

NodeList并不是数组类型，虽然使用方式与数组类似，但是不能直接使用数组方法，例如forEach()、map()等操作。同样也没有数组的一些内置方法或属性，例如push()、pop()、slice()等。

如果想要使用数组方法，需要将NodeList转换为数组，可以使用Array.from()方法或直接使用展开操作符（spread operator）。

// 复制为数组形式
const list = Array.from(document.querySelectorAll('li'));
// 或者使用展开操作符
const list = [...document.querySelectorAll('li')];

NodeList是动态的

尽管NodeList不是数组，但是却是动态的。也就是说当文档中的节点发生变化时，返回的NodeList也会发生变化。

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

<button onclick="addNode()">添加节点</button>

<script>
function addNode() {
  const ul = document.querySelector('ul');
  const li = document.createElement('li');
  li.textContent = '4';
  ul.appendChild(li);
}

const list = document.querySelectorAll('li');
console.log(list.length); // 输出 3

addNode();
console.log(list.length); // 输出 4
</script>

上面的例子中，当页面加载完成之后，获取了三个li元素，但是当我们通过点击按钮添加了一个新的li元素之后，再次打印list时，它的长度变成了4。这说明NodeList与页面上的 DOM元素存在强关联性，并且 Node List内容随之动态变化。

总结

需要注意的是，NodeList并不是标准的JavaScript数据结构，但是由于与DOM操作密不可分，因此我们在日常开发中会经常接触到它。了解它的特点和使用方式，有助于我们更加深入地理解DOM操作的本质，提高代码质量和效率。