使用 JavaScript 向多个元素添加属性

将一个类添加到多个元素:

  1. 使用 document.querySelectorAll() 方法选择元素。
  2. 使用 forEach 方法迭代元素集合。
  3. 使用 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 方法有两个参数:

  1. name – 要设置其值的属性的名称。
  2. 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。