使用JavaScript按ID获取多个元素的方法

在前端开发中，我们经常需要通过ID来获取DOM元素。但是，如果我们要获取多个ID相同的元素时，该怎么办呢？这篇文章将介绍几种JavaScript实现按ID获取多个元素的方法，并提供示例代码。

1. 使用document.querySelectorAll()

<ul>
    <li id="item1">Item 1</li>
    <li id="item2">Item 2</li>
    <li id="item3">Item 3</li>
    <li id="item4">Item 4</li>
    <li id="item5">Item 5</li>
</ul>

const items = document.querySelectorAll('#item1');
console.log(items);

使用document.querySelectorAll()方法可以获取所有符合选择器的元素，返回一个NodeList对象。在上面的例子中，我们传入了#item1作为选择器，可以获取所有ID为item1的元素。

2. 使用document.getElementsByTagName()

-- -------------------- ---- -------
----- ----- - ------------------------------------
----- ------------- - ---

--- ---- - - -- - - ------------- ---- -
    -- ------------ --- -------- -
        -----------------------------
    -
-

---------------------------

document.getElementsByTagName()方法可以获取所有指定标签名的元素，返回一个HTMLCollection对象。在上面的例子中，我们先获取到所有li元素，然后通过循环筛选出ID为item1的元素。

3. 使用jQuery

<ul>
    <li id="item1">Item 1</li>
    <li id="item2">Item 2</li>
    <li id="item3">Item 3</li>
    <li id="item4">Item 4</li>
    <li id="item5">Item 5</li>
</ul>

const items = $('#item1');
console.log(items);

使用jQuery可以更加简单地实现按ID获取多个元素。在上面的例子中，我们使用了$('#item1')选择器来获取所有ID为item1的元素。

总结

以上是三种常见的JavaScript实现按ID获取多个元素的方法，它们分别是：

• 使用document.querySelectorAll()方法
• 使用document.getElementsByTagName()方法
• 使用jQuery选择器

这些方法可以方便地获取页面上可复用的HTML元素，提高开发效率。但是，在实际开发中，我们应该尽可能避免重复使用相同的ID，以避免产生不必要的麻烦。

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