使用 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。
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布，任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站。本站所有源码与软件均为原作者提供，仅供学习和研究使用。如您对本站的相关版权有任何异议，或者认为侵犯了您的合法权益，请及时通知我们处理。
![Cannot use import statement outside a module [React TypeScript 错误的处理方法]](https://www.zadmei.com/wp-content/uploads/2022/10/office-ga13a58a41_1280.jpg)
