JavaScript 通过 id 获取多个元素

在 JavaScript 中，我们可以通过元素的 id 属性来获取对应的元素。通过 id 获取单个元素的方法非常简单，可以使用 document.getElementById()。然而，如果我们需要获取多个具有相同 id 的元素时，就需要使用其他方法了。

以下是几种可以通过 id 获取多个元素的方法：

1. 使用 document.querySelectorAll()

document.querySelectorAll() 方法可以通过 CSS 选择器来选择多个元素，并返回一个 NodeList 对象，其中包含所有符合选择器条件的元素。

// 使用 document.querySelectorAll() 获取具有相同 id 的所有元素
const elements = document.querySelectorAll("#myId");

// 遍历 NodeList
elements.forEach(element => {
  console.log(element);
});

2. 使用 document.getElementsByClassName()

document.getElementsByClassName() 方法可以通过类名获取具有相同类名的元素，并返回一个 HTMLCollection 对象。

// 使用 document.getElementsByClassName() 获取具有相同 id 的所有元素
const elements = document.getElementsByClassName("myClass");

// 转换为数组
const elementsArray = Array.from(elements);

// 遍历数组
elementsArray.forEach(element => {
  console.log(element);
});

3. 使用 document.getElementsByTagName()

document.getElementsByTagName() 方法可以通过元素标签名获取具有相同标签名的元素，并返回一个 HTMLCollection 对象。

// 使用 document.getElementsByTagName() 获取具有相同 id 的所有元素
const elements = document.getElementsByTagName("div");

// 转换为数组
const elementsArray = Array.from(elements);

// 遍历数组
elementsArray.forEach(element => {
  console.log(element);
});

以上这些方法都可以用来获取具有相同 id 的多个元素。根据需要选择适合的方法来获取元素。

请注意，以上方法返回的是类数组对象，如果需要使用数组的方法和属性，可以使用 Array.from() 将其转换为真正的数组。

希望本文对你有帮助！