JavaScript getElementsByClassName函数攻略

何为getElementsByClassName函数？

getElementsByClassName是JavaScript中的一个内置函数，用于通过指定的类名来获取文档中所有具有该类名的元素。这个函数返回一个动态的HTML集合，可以根据需要进行遍历和操作。

语法

document.getElementsByClassName(classNames);

classNames：一个或多个类名，用空格分隔。可以传递多个类名，在这种情况下，函数将返回具有所有指定类名的元素集合。

注意事项

getElementsByClassName返回的是一个动态的HTML集合，而不是一个静态数组。这意味着当文档中的元素发生改变时，集合会自动更新，但是这也意味着在处理集合时需要小心，因为它不支持数组上的所有方法。
该函数在所有主流的浏览器中都有良好的支持。

示例说明

示例1：获取所有具有相同类名的元素

<!DOCTYPE html>
<html>
<body>

<h2 class="title">标题1</h2>
<p>这是一个段落。</p>
<h2 class="title">标题2</h2>
<p>这是另一个段落。</p>

<script>
// 获取所有具有类名"title"的元素
var elements = document.getElementsByClassName("title");

// 遍历元素并输出其文本内容
for (var i = 0; i < elements.length; i++) {
  console.log(elements[i].textContent);
}
</script>

</body>
</html>

解析：
- 根据类名"title"，使用getElementsByClassName函数获取到了所有具有该类名的元素。
- 使用for循环遍历elements集合，对每个元素打印出其文本内容。

示例2：获取带有多个类名的元素

<!DOCTYPE html>
<html>
<body>

<h2 class="title">标题1</h2>
<p class="content">这是一个段落。</p>
<h2 class="title content">标题2</h2>
<p>这是另一个段落。</p>

<script>
// 获取所有具有类名"title"和"class"的元素
var elements = document.getElementsByClassName("title content");

// 遍历元素并输出其文本内容
for (var i = 0; i < elements.length; i++) {
  console.log(elements[i].textContent);
}
</script>

</body>
</html>

解析：
- 根据类名"title content"，使用getElementsByClassName函数获取到了所有具有这两个类名的元素。
- 使用for循环遍历elements集合，对每个元素打印出其文本内容。

以上是关于JavaScript getElementsByClassName函数的攻略介绍和两个示例说明。希望对你有所帮助！如有疑问，请随时追问。

阅读剩余 45%

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：javascript getElementsByClassName函数 - Python技术站

javascript getElementsByClassName函数