使getElementsByClassName以每个元素为目标

getElementsByClassName 是一个 JavaScript DOM 方法，它返回文档中所有具有指定类名的元素的 NodeList（类数组对象）。这个方法非常有用，因为它允许开发者快速地选取具有特定类名的多个元素。

基础概念

• NodeList：一个类数组对象，包含了所有匹配选择器的元素。它不是一个真正的数组，但可以使用 forEach 方法进行遍历。
• 类名：HTML 元素可以通过 class 属性拥有多个类名，这些类名可以用来应用样式或通过 JavaScript 进行选择。

优势

• 高效选择：相比于 querySelectorAll，getElementsByClassName 在某些情况下性能更好，尤其是在只需要获取类名匹配的元素时。
• 实时更新：getElementsByClassName 返回的 NodeList 是实时更新的，即如果后续 DOM 发生变化，NodeList 会自动反映这些变化。

类型

• 方法：这是一个 JavaScript 方法，属于 document 对象。

应用场景

• 动态操作：当你需要根据类名来改变元素的样式、内容或者响应事件时。
• 初始化脚本：在页面加载完成后，根据类名选取元素进行初始化设置。

示例代码

// 获取所有类名为 'example' 的元素
var elements = document.getElementsByClassName('example');

// 遍历这些元素并改变它们的背景色
for (var i = 0; i < elements.length; i++) {
    elements[i].style.backgroundColor = 'yellow';
}

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

问题：为什么使用 getElementsByClassName 获取不到元素？

• 原因：可能是类名拼写错误，或者查询时 DOM 尚未完全加载。
• 解决方法：检查类名是否正确，确保在 DOMContentLoaded 事件触发后执行脚本。

document.addEventListener('DOMContentLoaded', function() {
    var elements = document.getElementsByClassName('example');
    // 现在可以安全地操作这些元素
});

问题：NodeList 没有 map 或 filter 方法怎么办？

• 原因：NodeList 不是一个真正的数组，所以没有数组的方法。
• 解决方法：将 NodeList 转换为数组，然后使用数组方法。

var elementsArray = Array.from(document.getElementsByClassName('example'));
elementsArray.forEach(function(element) {
    // 使用 forEach 方法
});

参考链接

• MDN Web Docs: getElementsByClassName

通过上述信息，你应该能够更好地理解和使用 getElementsByClassName 方法，以及如何解决在使用过程中可能遇到的问题。