HTMLCollection item() 方法

在 Web 开发中，我们经常会遇到需要操作 DOM 元素集合的情况。HTMLCollection 是一个类数组对象，它包含了一组 DOM 元素。在这篇文章中，我们将重点介绍 HTMLCollection 对象的一个重要方法——item() 方法。

item() 方法概述

item() 方法是 HTMLCollection 对象的一个内置方法，它用于按索引获取集合中的元素。该方法接受一个整数参数，表示要获取的元素在集合中的索引。返回值为指定索引的元素，如果索引超出范围，则返回 null。

示例代码

让我们通过一个示例来演示 item() 方法的使用：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
  <title>HTMLCollection item() 方法示例</title>
</head>
<body>
  <div id="container">
    <p>第一个段落</p>
    <p>第二个段落</p>
    <p>第三个段落</p>
  </div>

  <script>
    const container = document.getElementById('container');
    const paragraphs = container.getElementsByTagName('p');

    const firstParagraph = paragraphs.item(0);
    const secondParagraph = paragraphs.item(1);
    const thirdParagraph = paragraphs.item(2);

    console.log(firstParagraph.textContent); // 输出：第一个段落
    console.log(secondParagraph.textContent); // 输出：第二个段落
    console.log(thirdParagraph.textContent); // 输出：第三个段落
  </script>
</body>
</html>

在上面的示例中，我们首先获取了 id 为 container 的 div 元素，然后通过 getElementsByTagName() 方法获取了该 div 元素下的所有 p 元素。接着使用 item() 方法按索引获取了第一个、第二个和第三个 p 元素，并输出它们的文本内容。

注意事项

• item() 方法的索引从 0 开始，因此第一个元素的索引为 0，第二个元素的索引为 1，以此类推。
• 如果索引超出集合的范围，item() 方法会返回 null，因此在使用该方法时需要注意边界情况。

总结

通过本文的介绍，我们了解了 HTMLCollection 对象的 item() 方法的基本用法和注意事项。掌握 item() 方法可以方便我们按索引获取集合中的元素，有助于更灵活地操作 DOM 元素。希望本文对你有所帮助！