getElementsByClassName

Coddy JavaScript DOM 方法课程的第 5 课，共 13 课。

函数 getElementsByClassName() 会返回所有具有匹配类属性的元素组成的数组，可用于选择多个具有相同样式或行为的元素。例如：

const elements = document.getElementsByClassName("className");

上面的代码会获取类名为 className 的元素，并将它们保存到名为 elements 的变量中。

我们必须遍历这个变量，才能更改所有相似元素的属性。例如：

for (const element of elements) {
	className.style.color = "blue";
	className.style.fontWeight = "bolder";
}

挑战

简单

给定的 HTML 代码中包含一些带有类名 highlight 的段落。

仅使用 JavaScript，更改文本的颜色和字体粗细：

使用 getElementsByClassName() 函数获取这些元素。
使用 for 循环遍历获取到的元素变量。
使用 style 属性，将数组中每个元素的 color 修改为 “orange”，并将 fontWeight 修改为 “bold”。

你需要刷新网页才能看到更改：

亲手试试

<!DOCTYPE html>
<html>
    <body>
        <p class="highlight">Text 1</p>
        <p class="highlight">Text 2</p>
        <script src="script.js"></script>
    </body>
</html>

JavaScript DOM 方法中的所有课

1简介

简介文档对象模型

2DOM 方法 I

getElementById 修改元素样式getElementsByClassName遍历并操作 getElementsByTagName querySelector

3DOM 方法 II

querySelectorAll addEventListener innerHTML createElement 和 appendChild classList 切换

自己练习： Web 在线编辑器