参考资料

1. HTML DOM 改变一个包含在iframe中的文档的背景颜色
2. HTML DOM 哪个元素被按下了？
3. HTML DOM 方法
4. HTML DOM对单个单元格的内容水平对齐
5. HTML DOM改变下拉列表中被选中的选项的文本
6. HTML DOM 返回文档中第一个锚的 innerHTML
7. HTML DOM 返回文档的最后一次修改时间 实例
8. HTML DOM 返回一个链接的type属性的值实例

HTML DOM 节点列表长度

HTML DOM 节点列表长度格式化

详细介绍

HTML DOM 节点列表长度格式化是指获取和操作 DOM 节点集合的长度属性。在 JavaScript 中，当使用 getElementsByTagName()、getElementsByClassName() 或 querySelectorAll() 等方法时，会返回一个类似数组的节点列表对象，这个对象具有 length 属性表示集合中元素的数量。

常用标签

节点列表通常由以下方法产生：

• document.getElementsByTagName('div')

• document.getElementsByClassName('example')

• document.querySelectorAll('p.special')

基本用法

// 获取节点列表
const paragraphs = document.getElementsByTagName('p');

// 获取节点列表长度
const length = paragraphs.length;

// 遍历节点列表
for (let i = 0; i < paragraphs.length; i++) {
  console.log(paragraphs[i]);
}

功能实例

// 统计页面中所有图片数量
const imageCount = document.getElementsByTagName('img').length;
console.log(`页面中共有 ${imageCount} 张图片`);

// 检查是否存在特定类名的元素
const hasSpecialElements = document.getElementsByClassName('special').length > 0;

CSS 扩展

可以通过 CSS 选择器结合 querySelectorAll 获取更精确的节点列表：

// 获取所有具有 data-id 属性的 div 元素
const divsWithId = document.querySelectorAll('div[data-id]');
console.log(`找到 ${divsWithId.length} 个带有 data-id 的 div 元素`);

示例说明

// 示例1：动态改变元素样式
const redElements = document.querySelectorAll('.red');
for (let i = 0; i < redElements.length; i++) {
  redElements[i].style.color = 'red';
}

// 示例2：批量添加事件监听器
const buttons = document.getElementsByTagName('button');
for (let i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener('click', function() {
    console.log(`按钮 ${i + 1} 被点击`);
  });
}

// 示例3：检查空列表
const emptyList = document.querySelectorAll('.non-existent');
if (emptyList.length === 0) {
  console.log('没有找到匹配的元素');
}