码农教程 - 一技在手,衣食无忧! tools

目录

HTML DOM 文档 getElementsByClassName()

❮上一节 ❮ 文档对象参考 下一节❯

示例

获取所有class="example"的元素：

const collection = document.getElementsByClassName("example");
亲自试一试 »

获取同时具有 "example" 和 "color" 类的所有元素：

const collection = document.getElementsByClassName("example color");
亲自试一试 »

下面有更多示例。

描述

这个getElementsByClassName()方法返回具有指定类名的元素的集合。

这个getElementsByClassName()方法返回一个HTML集合。

这个getElementsByClassName()属性是只读的。

HTML集合

一个HTML集合是 HTML 元素的类似数组的集合（列表）。

集合中的元素可以通过索引（从 0 开始）访问。

长度属性返回集合中元素的数量。

也可以看看：

getElementById() 方法

getElementsByTagName() 方法

querySelector() 方法

querySelectorAll() 方法

HTMLCollection 对象

语法

document.getElementsByClassName( classname)

参数

Parameter Description
classname Required.
The class name of the elements.
Search for multiple class names separated by spaces like "test demo".

返回值

类型 描述
目的。 一个HTML集合目的。
具有指定类名的元素的集合。
元素按照它们在文档中出现的方式进行排序。

更多示例

class="example" 的元素数量：

let numb = document.getElementsByClassName("example").length;
亲自试一试 »

使用 class="example" 更改所有元素的背景颜色：

const collection = document.getElementsByClassName("example");
for (let i = 0; i < collection.length; i++) {
  collection[i].style.backgroundColor = "red";
}
亲自试一试 »

相关页面

CSS 教程：CSS 语法

CSS 参考：CSS。类选择器

HTML DOM 参考：元素.getElementsByClassName()

HTML DOM 参考：className 属性

HTML DOM 参考：classList 属性

HTML DOM 参考：样式对象

浏览器支持

document.getElementsByClassName()是 DOM Level 1 (1998) 功能。

所有浏览器都完全支持它：

Chrome Edge Firefox Safari Opera IE
Yes Yes Yes Yes Yes 9-11


❮上一节 ❮ 文档对象参考 下一节❯