JavaScript节点及列表操作实例小结

本文将简要介绍JavaScript中的节点及列表操作，重点讲解了如何使用JavaScript来遍历、操作和修改网页节点的属性以及节点的子元素。

一、获取节点

获取节点有多种方式，可以通过元素id、元素标签名、元素类名等方式获取节点。

1.1 通过元素id获取节点

使用document.getElementById(id)方法可以通过节点的id属性查找节点，如下所示：

var element = document.getElementById("example");

1.2 通过元素标签名获取节点

使用document.getElementsByTagName(tagName)方法可以通过元素标签名查找节点，如下所示：

var pTags = document.getElementsByTagName("p");

1.3 通过元素类名获取节点

使用document.getElementsByClassName(className)可以通过元素类名来查找节点，如下所示：

var elements = document.getElementsByClassName("example");

二、遍历子元素

每个节点都可能含有子元素，可以通过节点的childNodes属性来获取其子元素的列表，如下所示：

var element = document.getElementById("example");
var children = element.childNodes;

使用childNodes方法获取到的是一个节点列表，可以通过循环遍历来访问列表中的每个元素。

下面展示一个示例，通过遍历子元素来修改元素的样式：

var ul = document.getElementById("example");
var liList = ul.childNodes;
for (var i = 0; i < liList.length; i++) {
  liList[i].style.color = "red";
}

三、修改节点属性

可以使用JavaScript来修改节点的各种属性，如id、class、style等。

3.1 修改节点的id属性

可以使用element.id属性来修改节点的id属性，如下所示：

var element = document.getElementById("example");
element.id = "newId";

3.2 修改节点的class属性

可以使用element.className属性来修改节点的class属性，如下所示：

var element = document.getElementById("example");
element.className = "newClass";

3.3 修改节点的style属性

可以使用element.style对象来修改节点的style属性，如下所示：

var element = document.getElementById("example");
element.style.backgroundColor = "red";

四、添加和删除子元素

可以使用appendChild方法来添加一个子元素，使用removeChild方法来删除一个子元素。

下面展示一个示例，向一个列表中动态添加子元素：

var ul = document.getElementById("example");
var li = document.createElement("li");
li.innerHTML = "新元素";
ul.appendChild(li);

五、总结

在本文中，我们简要介绍了JavaScript中的节点及列表操作，包括获取节点、遍历子元素、修改节点属性、添加和删除子元素等操作，希望对你在JavaScript开发中操作节点及列表有所帮助。