参考资料

1. HTML DOM 返回一个button所属表的ID 实例
2. HTML DOM 返回一个区域的href属性的querystring部分 实例
3. HTML DOM单元格内容水平对齐
4. HTML DOM禁用和启用下拉列表
5. HTML DOM 节点列表长度
6. HTML DOM 根节点
7. HTML DOM 鼠标的坐标？
8. HTML DOM指定表格的frame

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('没有找到匹配的元素');
}