JavaScript DOM中的 document.getElementsByClassName()

在 JavaScript DOM 中，document.getElementsByClassName() 是一个非常实用的方法。它可以通过类名获取 HTML 元素集合。

使用方法

document.getElementsByClassName() 方法接受一个类名作为参数，并返回所有带有该类名的元素的集合。例如：

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

可以看到，我们将 document.getElementsByClassName() 方法的返回值赋值给了一个名为 examples 的变量。

注意事项

返回值类型

document.getElementsByClassName() 返回的是一个 HTMLCollection 对象，这是一个动态的对象。它所包含的元素是基于对文档的实时搜索得到的。

查找元素

该方法只会返回网页中所有具有指定类名的元素，而不包括文档片段、注释节点等其他类型的节点。

兼容性

虽然 document.getElementsByClassName() 被广泛使用，但是它并不是所有浏览器都支持的方法。特别是在 IE8 及更早期的版本中，不支持该方法。

示例

下面是一个示例，演示了如何使用 document.getElementsByClassName() 获取所有类名为 "example" 的元素，并改变它们的文本内容：

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

// 遍历所有元素
for (var i = 0; i < examples.length; i++) {
  // 改变元素的文本内容
  examples[i].textContent = "这是一个示例";
}

以上代码可以将所有类名为 "example" 的元素的文本内容改为"这是一个示例"。

总结

document.getElementsByClassName() 是一个方便、快捷的方法，可用于获取指定类名的元素并操作它们。虽然有一些浏览器不支持它，但是它在现代浏览器中被广泛使用，是前端工程师必备的技能之一。