参考资料

  1. HTML DOM 返回图像映射的某个区域的protocol 实例
  2. HTML DOM 属性
  3. HTML DOM 返回加载的当前文档的URL实例
  4. HTML DOM改变单元格横跨的列数(colspan属性)
  5. HTML DOM 返回图像映射的某个区域的shape 实例
  6. HTML DOM获得有下拉列表的表单的ID
  7. HTML DOM禁用和启用下拉列表
  8. HTML DOM 创建一个链接指向一个低分辨率的image

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：图像文档元素主要标签样式动态详细数量方法