JavaScript获取class元素的几种实现方法
作者：快点好好学习吧
在 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：用于在特定元素的子元素中查找具有指定类名的元素。
到此这篇关于JavaScript获取class元素的几种实现方法的文章就介绍到这了,更多相关JavaScript获取class元素内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！