在 web 前端开发中,经常会遇到需要操作多个具有相同类名的元素的情况。为了方便地选取这些元素,我们可以使用 HTML DOM 中的 getElementsByClassName()
方法。这个方法可以通过类名来获取文档中所有具有指定类名的元素,返回一个包含所有匹配元素的集合。
语法
document.getElementsByClassName(classname)
classname
:必需,一个或多个类名,多个类名之间使用空格分隔。
返回值
getElementsByClassName()
方法返回一个 HTMLCollection 对象,该对象是一个包含指定类名的所有元素的集合。HTMLCollection 对象是一个类数组对象,可以通过索引访问其中的元素。
示例
假设我们有以下 HTML 结构:
--------- ----- ------ ------ ------------------------------- ------------ ------- ------ ---- ------------------ -- ---------------------- -- ---------------------- -- ---------------------- ------ ------- -------
我们可以通过以下 JavaScript 代码获取所有类名为 text
的 <p>
元素:
----- -------- - ---------------------------------------- --- ---- - - -- - - ---------------- ---- - ------------------------------------- -
上述代码将会输出:
----- ----- -----
注意事项
getElementsByClassName()
方法返回的是一个动态集合,即当文档中的元素发生改变时,集合中的元素也会相应地更新。- 如果指定的类名不存在,方法将返回一个空的 HTMLCollection 对象。
- 返回的 HTMLCollection 对象是一个只读对象,不支持数组的方法,但可以通过索引访问其中的元素。
通过 getElementsByClassName()
方法,我们可以方便地选取文档中具有相同类名的元素,并对它们进行操作。这在实现一些动态效果或者样式的时候非常有用。希望本文对你有所帮助!