JavaScript and getElementById for multiple elements with the same ID

在前端开发中，我们经常需要使用JavaScript选取HTML文档中的元素并对其进行操作。getElementById()是一个非常常用的方法，它可以根据元素的ID属性来选择DOM节点，但是如果页面上存在多个相同ID的元素，这种选择就会出现问题。

然而，并不是所有人都知道如何解决这个问题。本文将介绍通过JavaScript选取具有相同ID属性的多个元素的方法。

使用querySelectorAll()

要选择具有相同ID属性的多个元素，我们可以使用querySelectorAll()方法。这个方法与getElementById()方法类似，只不过它可以使用CSS选择器来匹配元素。

例如，我们可以使用以下代码来选择所有ID为“example”的元素：

var elements = document.querySelectorAll('#example');

这个代码行将返回一个NodeList对象，其中包含所有具有ID属性为“example”的元素。我们可以遍历这个NodeList并对每个元素执行所需的操作。

遍历NodeList

由于NodeList对象是类似数组的对象，我们可以使用循环来遍历它。例如，以下代码演示了如何在控制台中打印所有具有ID属性为“example”的元素的文本内容：

var elements = document.querySelectorAll('#example');

for (var i = 0; i < elements.length; i++) {
  console.log(elements[i].textContent);
}

这个代码段将遍历NodeList并使用console.log()方法打印每个元素的文本内容。

结论

在前端开发中，经常需要选择具有相同ID属性的多个元素。虽然getElementById()方法无法解决这个问题，但我们可以使用querySelectorAll()方法来选择所有匹配CSS选择器的元素。然后，我们可以遍历返回的NodeList对象并对每个元素执行所需的操作。

希望这篇文章能够帮助你了解如何使用JavaScript选取具有相同ID属性的多个元素，并进一步提高你的前端技能。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/27904