DOM NodeList学习笔记

DOM NodeList是一种类数组对象，它存储了一个特定节点的所有子节点，以及其他可用方法和属性。在JavaScript中，我们可以使用NodeList来操作文档中的多个元素，并对它们进行各种操作。

创建NodeList

我们可以通过以下方式获取NodeList：

javascriptCopy Code
const list = document.querySelectorAll('li');

上述例子中，我们获取了文档中所有li标签的NodeList。

遍历NodeList

遍历NodeList的最常用方式是使用for循环。

javascriptCopy Code
for(let i = 0; i < list.length; i++){
  console.log(list[i])
}

查找NodeList中的元素

我们可以使用以下方法查找NodeList中的元素：

1. 通过索引值查找元素

   javascriptCopy Code
   const firstItem = list[0];
   

   这将返回NodeList中的第一个元素。
2. 使用forEach()遍历NodeList并查找元素

   javascriptCopy Code
   list.forEach(item => {
     console.log(item);
   })
   

3. 使用find()查找NodeList中的单个元素

   javascriptCopy Code
   const specificItem = Array.from(list).find(item => {
     return item.getAttribute('data-id') === '123';
   });
   

   上述例子中，我们查找具有“data-id”属性值为“123”的元素。

对NodeList中的元素进行操作

我们可以使用NodeList中的以下方法来对元素进行各种操作：

1. forEach()，使用该方法遍历所有元素并进行操作。

   javascriptCopy Code
   list.forEach(item => {
     item.classList.add('active');
   })
   

   上述例子中，我们添加了“active”类到NodeList中的每个元素。
2. map()，使用该方法遍历所有元素并返回一个新的数组，我们可以在其中对元素进行各种操作。

   javascriptCopy Code
   const newList = Array.from(list).map(item => {
     return item.innerText.toUpperCase();
   });
   

   上述例子中，我们将NodeList中每个元素的文本内容转换为大写字母，并将结果存储在newList数组中。

示例

在以下示例中，我们将通过使用NodeList来查找所有具有“data-js-item”属性的元素，并依次将它们的高度设置为200像素。

htmlCopy Code
<ul>
  <li data-js-item>Item 1</li>
  <li data-js-item>Item 2</li>
  <li>Item 3</li>
  <li data-js-item>Item 4</li>
</ul>

javascriptCopy Code
const itemList = document.querySelectorAll('[data-js-item]');

itemList.forEach(item => {
  item.style.height = '200px';
});

上述例子中，我们首先通过使用“[data-js-item]”选择器查找具有“data-js-item”属性的所有元素。然后，我们使用forEach()方法依次遍历每个元素，并将其高度设置为200像素。