HTMLCollection 元素 ID 的获取方法解析

javascript

2024-02-10 15:55:02

HTMLCollection 元素的 ID 访问

在处理 HTML 时，我们经常需要获取元素的 ID 属性。对于标准元素，我们可以直接使用 element.id 来获取，但对于 HTMLCollection 类型的元素，则需要采用不同的方法。

HTMLCollection

HTMLCollection 是一个类似数组的对象，但它没有与数组相同的方法，如 id。因此，我们无法直接使用 collection.id 来获取元素的 ID。

获取 ID 的正确方法

要正确获取 HTMLCollection 元素的 ID，有两种方法：

通过索引： 我们可以通过 collection[index] 来访问特定索引的元素，然后获取它的 id 属性。
直接获取： 也可以直接使用 element.id 来获取元素的 ID。

示例代码

以下代码演示了这两种方法：

<div class="events" id="event1"></div>
<div class="events" id="event2"></div>
<div class="events" id="event3"></div>

<script>
  // 获取 HTMLCollection
  const list = document.getElementsByClassName("events");

  // 通过索引获取第一个元素的 ID
  console.log(list[0].id); // 输出 "event1"

  // 遍历 HTMLCollection 并获取每个元素的 ID
  for (let i = 0; i < list.length; i++) {
    console.log(list[i].id); // 输出每个元素的 ID
  }
</script>