js循环查找img

在JavaScript中，循环查找img元素通常使用document.getElementsByTagName方法或者document.querySelectorAll方法。

一、基础概念

1. document.getElementsByTagName
   • 这是一个DOM（文档对象模型）方法，它返回带有指定标签名的对象的实时HTMLCollection（一个类数组对象）。对于img标签，它会返回页面中所有的img元素。
   • 示例代码：
   • 示例代码：
   • 在上述代码中，首先获取所有的img元素，然后通过一个for循环遍历这个HTMLCollection，打印出每个img元素的src属性（图片的源地址）。

• document.querySelectorAll
  • 这个方法返回文档中匹配指定CSS选择器的所有元素节点的一个静态NodeList（也是一个类数组对象）。
  • 示例代码：
  • 示例代码：
  • 这里使用querySelectorAll获取所有img元素，然后使用forEach方法遍历这个NodeList，打印出每个img元素的alt属性（图片的替代文本）。

二、优势

1. 灵活性
   • 对于getElementsByTagName，它可以方便地获取特定标签名的所有元素，操作简单直接。
   • querySelectorAll的优势在于它可以使用复杂的CSS选择器。例如，如果要查找具有特定类名的img元素，可以使用document.querySelectorAll('img.myClass')。

• 可维护性
  • 使用标准化的DOM方法使得代码在不同的浏览器环境下具有较好的兼容性（虽然现代浏览器对这些方法的支持都非常好），并且易于理解和维护。

三、应用场景

1. 图片懒加载优化
   • 在页面加载大量图片时，可以先获取所有的img元素，然后根据用户的滚动位置动态加载图片，提高页面加载速度和用户体验。
   • 示例代码（简单示意）：
   • 示例代码（简单示意）：

• 批量修改图片属性
  • 例如，要统一修改页面上所有图片的大小或者添加一个边框效果，可以先获取所有img元素，然后遍历修改其样式属性。

四、可能遇到的问题及解决方法

1. 动态添加的img元素未被获取
   • 如果在页面加载后通过JavaScript动态添加了img元素，使用getElementsByTagName或querySelectorAll获取到的初始集合不会包含新添加的元素。
   • 解决方法：可以在需要处理新添加元素的时候再次调用获取元素的方法，或者使用事件委托等技术。例如，如果要对新添加的img元素进行懒加载，可以在添加img元素的代码后面紧接着调用懒加载相关的函数。

• 性能问题
  • 当页面中有大量的img元素时，频繁地遍历这些元素可能会导致性能下降。
  • 解决方法：可以对操作进行优化，例如减少不必要的遍历次数，或者使用节流（throttle）和防抖（debounce）技术来控制相关函数的调用频率。