参考资料

1. HTML DOM获得有下拉列表的表单的ID
2. HTML DOM document.write() 方法
3. HTML DOM改变单元格的内容
4. HTML DOM 重置表单
5. HTML DOM 用指定的Name弹出元素的数量实例
6. HTML DOM 返回图像映射的某个区域的href 实例
7. HTML DOM对单个单元格的内容水平对齐
8. HTML DOM 改变一个包含在iframe中的文档的背景颜色

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

声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。