使用 JavaScript 向多个元素添加属性
将一个类添加到多个元素：
-
使用
document.querySelectorAll()方法选择元素。 -
使用
forEach方法迭代元素集合。 -
使用
setAttribute方法为每个元素添加一个属性。
这是此示例的 HTML。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<body>
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
<script src="index.js"></script>
</body>
</html>
这是相关的 JavaScript 代码。
const boxes = document.querySelectorAll('.box');
boxes.forEach((box, index) => {
box.setAttribute('id', `box-${index}`);
});
我们使用 document.querySelectorAll 方法来选择具有 box 类的所有元素。
我们使用 NodeList.forEach 方法迭代 NodeList。
为了给每个元素添加一个属性，我们使用了
setAttribute方法。
setAttribute 方法有两个参数：
- name - 要设置其值的属性的名称。
- value - 分配给属性的值。
在示例中，我们为 NodeList 中的每个元素添加了一个 id 属性。
如果该属性已存在，则更新该值，否则添加具有指定名称和值的新属性。
querySelectorAll 方法采用一个或多个选择器，因此我们能够选择具有多个不同类、id、标签等的元素。
下面是一个使用该方法获取具有 3 个不同类的元素集合的示例。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<body>
<div class="box1">Box 1</div>
<div class="box2">Box 2</div>
<div class="box3">Box 3</div>
<script src="index.js"></script>
</body>
</html>
下面是JavaScript代码
const boxes = document.querySelectorAll('.box1, .box2, .box3');
boxes.forEach((box, index) => {
box.setAttribute('id', `box-${index}`);
});
我们通过用逗号分隔将 3 个不同的选择器传递给 querySelectorAll 方法。
我们可以通过在 id 值前加上 # 来将 id 传递给方法，例如 ＃my-id。
相关文章
Do you understand JavaScript closures?
发布时间：2025/02/21 浏览次数：108 分类：JavaScript
-
The function of a closure can be inferred from its name, suggesting that it is related to the concept of scope. A closure itself is a core concept in JavaScript, and being a core concept, it is naturally also a difficult one.
Do you know about the hidden traps in variables in JavaScript?
发布时间：2025/02/21 浏览次数：178 分类：JavaScript
-
Whether you're just starting to learn JavaScript or have been using it for a long time, I believe you'll encounter some traps related to JavaScript variable scope. The goal is to identify these traps before you fall into them, in order to av
How much do you know about the Prototype Chain?
发布时间：2025/02/21 浏览次数：150 分类：JavaScript
-
The prototype chain can be considered one of the core features of JavaScript, and certainly one of its more challenging aspects. If you've learned other object-oriented programming languages, you may find it somewhat confusing when you start
如何在 JavaScript 中合并两个数组而不出现重复的情况
发布时间：2024/03/23 浏览次数：86 分类：JavaScript
-
本教程介绍了如何在 JavaScript 中合并两个数组，以及如何删除任何重复的数组。
