NodeList 对象学习笔记

简介

NodeList 对象表示一个节点的集合。通过使用 NodeList 对象，您可以访问节点标记的子元素列表。NodeList 在 JavaScript 中被广泛使用。在大多数情况下，NodeList 对象是只读的，这意味着您不能在 NodeList 中添加、删除或更改项目。

创建 NodeList

有多种方法可以创建 NodeList：

1.查询

您可以通过查询 DOM 树来获取 NodeList。以下代码演示了如何从 document 中获取<li>元素的集合：

Copy Code
var list = document.getElementsByTagName("li");

2.自身属性

还可以通过自身属性来创建 NodeList。例如，childNodes 属性返回当前元素的子节点列表:

Copy Code
var childNodes = document.body.childNodes;

遍历 NodeList

遍历 NodeList 时，可以使用以下方法：

1.for 循环

使用 for 循环逐一访问 NodeList 中的元素，如下所示：

Copy Code
var list = document.getElementsByTagName("li");
for (var i = 0; i < list.length; i++) {
    console.log(list[i].innerHTML);
}

2.forEach

如果浏览器支持 ES6，则可以使用 forEach() 方法来遍历 NodeList：

Copy Code
var list = document.getElementsByTagName("li");
list.forEach(function(item){
    console.log(item.innerHTML);
});

实例演示

下面提供一个实例，演示如何遍历 NodeList 并修改其中的元素属性：

HTML 代码：

Copy Code
<!DOCTYPE html>
<html>
    <head>
        <title>NodeList 实例</title>
    </head>
    <body>
        <ul>
            <li>苹果</li>
            <li>香蕉</li>
            <li>橙子</li>
            <li>草莓</li>
        </ul>
        <button id="change-li">修改 li 的颜色</button>
        <script>
            // 遍历 NodeList 并修改颜色
            var list = document.getElementsByTagName("li");
            document.getElementById("change-li").addEventListener("click", function(){
                for(var i=0; i<list.length; i++){
                    list[i].style.color = "red";
                }
            });
        </script>
    </body>
</html>

该实例中，我们获取了包含四个 <li> 元素的 NodeList，并为一个按钮添加事件监听器。当用户点击该按钮时，我们将遍历 NodeList 并将所有 <li> 元素的文本颜色更改为红色。

总结

本文简要介绍了 NodeList 对象的概念、创建方法、遍历方式以及相关实例。NodeList 对于拥有多个子元素孙子元素的元素非常有用，熟练掌握 NodeList 对象的使用能够提高您的 JavaScript 编码效率。