参考资料

  1. HTML DOM 返回表单中的enctype属性的值
  2. HTML DOM指定表格的frame
  3. HTML DOM 返回一个区域的href属性的锚部分实例
  4. HTML DOM 当点击完button不可用 实例
  5. HTML DOM改变表格边框的宽度
  6. HTML DOM 节点列表长度
  7. HTML DOM 打开输出流，向流中输入文本实例
  8. HTML DOM 返回图像映射的某个区域的target的值 实例

HTML DOM 返回文档中的图像数

HTML DOM 返回文档中的图像数

详细介绍

HTML DOM 提供了获取文档中图像数量的方法，主要通过 document.images 集合实现。这是一个包含文档中所有 <img> 元素的 HTMLCollection。

标签

主要涉及 HTML 的 <img> 标签和 JavaScript 的 DOM 操作。

用法

// 获取文档中所有图像的数量
var imageCount = document.images.length;

// 遍历所有图像
for (var i = 0; i < document.images.length; i++) {
    console.log(document.images[i].src);
}

实例

<!DOCTYPE html>
<html>
<head>
    <title>图像数量示例</title>
</head>
<body>
    <img src="image1.jpg" alt="图片1">
    <img src="image2.jpg" alt="图片2">
    <img src="image3.jpg" alt="图片3">
    
    <script>
        window.onload = function() {
            var count = document.images.length;
            console.log("文档中共有 " + count + " 张图片");
            
            // 修改所有图像的边框
            for (var i = 0; i < count; i++) {
                document.images[i].style.border = "2px solid red";
            }
        };
    </script>
</body>
</html>

功能

  1. 获取文档中图像的总数

  2. 访问和操作单个图像元素

  3. 批量修改图像属性

CSS 扩展

可以通过 CSS 为图像添加样式，然后使用 DOM 动态修改这些样式：

/* 基础样式 */
img {
    margin: 10px;
    transition: all 0.3s ease;
}

.highlight {
    border: 3px solid blue;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
// 使用 DOM 添加 CSS 类
document.images[0].classList.add('highlight');

// 或者直接修改样式
document.images[1].style.opacity = '0.5';

注意事项

  • document.images 只包含 <img> 元素，不包含通过 CSS background-image 设置的图像

  • 集合是动态的，会随文档中图像的增加或减少而更新

  • 图像必须在 DOM 加载完成后才能访问，通常放在 window.onload 或 DOMContentLoaded 事件中处理

TAG：图像文档元素主要标签样式动态详细数量方法