参考资料

1. HTML DOM 修改 HTML 内容
2. HTML DOM改变表格边框的宽度
3. HTML DOM 鼠标的坐标？
4. HTML DOM 获取第一个链接ID的实例
5. HTML DOM获得下拉列表的选项数量
6. HTML DOM添加表格行中的单元格
7. HTML DOM 导航节点关系
8. HTML DOM 返回一个表单中所有元素的value 实例

HTML DOM 节点列表

HTML DOM 节点列表格式化

简介

HTML DOM 节点列表(NodeList)是 DOM 方法返回的节点集合，通常由 querySelectorAll()、childNodes 等属性或方法返回。

主要标签和方法

• document.querySelectorAll()

• element.childNodes

• element.children

• document.getElementsByTagName()

• document.getElementsByClassName()

基本用法

获取节点列表

// 通过选择器获取
const nodeList = document.querySelectorAll('p');

// 通过子节点获取
const childNodes = document.body.childNodes;

// 通过标签名获取
const elementsByTag = document.getElementsByTagName('div');

遍历节点列表

// 使用 for 循环
for (let i = 0; i < nodeList.length; i++) {
  console.log(nodeList[i]);
}

// 使用 forEach (仅适用于 querySelectorAll 返回的 NodeList)
nodeList.forEach(node => {
  console.log(node);
});

// 使用 ES6 扩展运算符转为数组
[...nodeList].forEach(node => {
  console.log(node);
});

功能特性

• 类数组对象，有 length 属性

• 可以通过索引访问元素

• 动态或静态集合（取决于获取方式）

• 不是真正的数组，没有数组方法（除非转换）

CSS 扩展

可以通过 CSS 选择器来精确选择需要格式化的节点：

// 选择所有 class 为 highlight 的元素
const highlights = document.querySelectorAll('.highlight');

// 选择特定结构下的元素
const nestedItems = document.querySelectorAll('ul li > a');

示例说明

示例1：修改所有段落文本

const paragraphs = document.querySelectorAll('p');
paragraphs.forEach(p => {
  p.style.color = 'blue';
  p.style.fontSize = '16px';
});

示例2：统计子元素数量

const container = document.getElementById('container');
const childCount = container.childNodes.length;
console.log(`容器中有 ${childCount} 个子节点`);

示例3：动态过滤节点

const allDivs = document.querySelectorAll('div');
const visibleDivs = [...allDivs].filter(div => {
  return div.offsetWidth > 0 && div.offsetHeight > 0;
});
console.log(`共有 ${visibleDivs.length} 个可见的 div 元素`);

示例4：批量添加事件

const buttons = document.querySelectorAll('.btn');
buttons.forEach(button => {
  button.addEventListener('click', function() {
    console.log('按钮被点击');
  });
});

注意事项

1. querySelectorAll 返回的是静态集合

2. getElementsByClassName 等返回的是动态集合

3. 节点列表不是数组，要使用数组方法需要先转换

4. 某些旧版浏览器可能不支持 NodeList 的 forEach 方法