JavaScript HTML DOM 节点列表

JavaScript HTML DOM 节点列表是一种用于存储和操作一组节点的对象。节点列表常用于处理网页中的元素、文本节点和注释节点等。本文将详细介绍 JavaScript HTML DOM 节点列表的使用方法，包括如何获取节点列表、遍历节点、操作节点等。

1. 获取节点列表

通过使用 JavaScript HTML DOM 提供的方法，我们可以获取网页中的节点列表。


  // 通过类名获取节点列表
  let nodeListByClassName = document.getElementsByClassName("my-class");

  // 通过标签名获取节点列表
  let nodeListByTagName = document.getElementsByTagName("div");

  // 通过选择器获取节点列表
  let nodeListBySelector = document.querySelectorAll(".my-selector");

2. 遍历节点列表

一旦获取到节点列表，我们可以使用循环遍历列表中的节点，进行相应的操作。


  // 遍历类名为 "my-class" 的节点列表
  let nodeList = document.getElementsByClassName("my-class");
  for (let i = 0; i < nodeList.length; i++) {
    let node = nodeList[i];
    // 在此处执行操作
  }

3. 操作节点

我们可以使用节点提供的方法和属性来操作节点。


  // 获取类名为 "my-class" 的第一个节点
  let node = document.getElementsByClassName("my-class")[0];

  // 修改节点属性
  node.setAttribute("attribute-name", "new-value");

  // 修改节点文本内容
  node.textContent = "New text content";

  // 创建新节点
  let newNode = document.createElement("div");

  // 在节点列表末尾添加新节点
  nodeList.appendChild(newNode);

  // 从节点列表中移除节点
  nodeList.removeChild(node);