在 JavaScript 中,获取具有特定类名(class)的元素可以通过多种方式实现,以下为你详细介绍常见的几种方法:
1. 使用 document.getElementsByClassName 方法
这是一个较为传统的方法,它会返回一个实时的 HTMLCollection 对象,包含了所有具有指定类名的元素。
在上述代码中,document.getElementsByClassName('example') 会返回所有类名为 example 的元素,然后通过 for 循环遍历这些元素并输出其文本内容。需要注意的是,HTMLCollection 是实时更新的,当 DOM 结构发生变化时,它会自动更新。
2. 使用 document.querySelectorAll 方法
该方法更加灵活,它可以使用 CSS 选择器来获取元素,会返回一个静态的 NodeList 对象。
在这段代码里,document.querySelectorAll('.example') 通过 CSS 选择器 .example 获取所有类名为 example 的元素,然后使用 forEach 方法遍历 NodeList 并输出元素的文本内容。与 HTMLCollection 不同,NodeList 是静态的,DOM 结构的变化不会影响它。
3. 使用 Element.prototype.getElementsByClassName 方法
如果你想在某个特定元素的子元素中查找具有指定类名的元素,可以使用这个方法。
在上述代码中,先通过 document.getElementById('parent') 获取父元素,然后使用 parent.getElementsByClassName('example') 在父元素的子元素中查找类名为 example 的元素,最后遍历并输出这些元素的文本内容。
总结
document.getElementsByClassName:返回实时的 HTMLCollection,适用于需要实时反映 DOM 变化的场景。
document.querySelectorAll:返回静态的 NodeList,支持更复杂的 CSS 选择器,使用更灵活。
Element.prototype.getElementsByClassName:用于在特定元素的子元素中查找具有指定类名的元素。
原文链接:JavaScript获取class元素如何实现?