在 JavaScript 中，获取具有特定类名（class）的元素可以通过多种方式实现，以下为你详细介绍常见的几种方法：
1. 使用 document.getElementsByClassName 方法
这是一个较为传统的方法，它会返回一个实时的 HTMLCollection 对象，包含了所有具有指定类名的元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>getElementsByClassName Example</title>
</head>
<body>
<div class="example">这是一个示例 div 1</div>
<div class="example">这是一个示例 div 2</div>
<script> // 获取所有具有 "example" 类名的元素 const elements = document.getElementsByClassName('example'); // 遍历 HTMLCollection 并输出每个元素的文本内容 for (let i = 0; i < elements.length; i++) {
console.log(elements[i].textContent); } </script>
</body>
</html>
在上述代码中，document.getElementsByClassName('example') 会返回所有类名为 example 的元素，然后通过 for 循环遍历这些元素并输出其文本内容。需要注意的是，HTMLCollection 是实时更新的，当 DOM 结构发生变化时，它会自动更新。
2. 使用 document.querySelectorAll 方法
该方法更加灵活，它可以使用 CSS 选择器来获取元素，会返回一个静态的 NodeList 对象。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>querySelectorAll Example</title>
</head>
<body>
<div class="example">这是一个示例 div 1</div>
<div class="example">这是一个示例 div 2</div>
<script> // 获取所有具有 "example" 类名的元素 const elements = document.querySelectorAll('.example'); // 使用 forEach 方法遍历 NodeList 并输出每个元素的文本内容 elements.forEach((element) => {
console.log(element.textContent); }); </script>
</body>
</html>
在这段代码里，document.querySelectorAll('.example') 通过 CSS 选择器 .example 获取所有类名为 example 的元素，然后使用 forEach 方法遍历 NodeList 并输出元素的文本内容。与 HTMLCollection 不同，NodeList 是静态的，DOM 结构的变化不会影响它。
3. 使用 Element.prototype.getElementsByClassName 方法
如果你想在某个特定元素的子元素中查找具有指定类名的元素，可以使用这个方法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Element getElementsByClassName Example</title>
</head>
<body>
<div id="parent">
<div class="example">这是父元素下的示例 div 1</div>
<div class="example">这是父元素下的示例 div 2</div>
</div>
<div class="example">这是父元素外的示例 div</div>
<script> // 获取父元素 const parent = document.getElementById('parent'); // 在父元素的子元素中获取所有具有 "example" 类名的元素 const childElements = parent.getElementsByClassName('example'); // 遍历 HTMLCollection 并输出每个元素的文本内容 for (let i = 0; i < childElements.length; i++) {
console.log(childElements[i].textContent); } </script>
</body>
</html>
在上述代码中，先通过 document.getElementById('parent') 获取父元素，然后使用 parent.getElementsByClassName('example') 在父元素的子元素中查找类名为 example 的元素，最后遍历并输出这些元素的文本内容。
总结
document.getElementsByClassName：返回实时的HTMLCollection，适用于需要实时反映 DOM 变化的场景。document.querySelectorAll：返回静态的NodeList，支持更复杂的 CSS 选择器，使用更灵活。Element.prototype.getElementsByClassName：用于在特定元素的子元素中查找具有指定类名的元素。
© 版权声明
THE END
![表情[baoquan]-拾光赋](https://blogs.ink/wp-content/themes/zibll/img/smilies/baoquan.gif)
暂无评论内容