HTMLCollection namedItem() 方法

什么是 HTMLCollection namedItem() 方法

HTMLCollection 的 namedItem() 方法用于根据元素的 id 或者 name 属性来获取特定的元素。它接受一个参数，即要获取的元素的 id 或者 name 属性的值，并返回匹配的元素。如果找不到匹配的元素，则返回 null。

如何使用 HTMLCollection namedItem() 方法

下面是一个简单的示例代码，演示了如何使用 namedItem() 方法来获取具有特定 id 的元素：

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

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

        var paragraph1 = paragraphs.namedItem('paragraph1');
        var paragraph2 = paragraphs.namedItem('paragraph2');

        console.log(paragraph1.textContent); // 输出：这是第一个段落
        console.log(paragraph2.textContent); // 输出：这是第二个段落
    </script>
</body>
</html>

在上面的示例中，我们首先获取了 id 为 container 的元素，然后通过 getElementsByTagName() 方法获取了该元素下的所有 p 标签元素。接着，我们分别使用 namedItem() 方法获取了 id 为 paragraph1 和 paragraph2 的两个 p 元素，并打印它们的内容。

注意事项

• namedItem() 方法只能用于 HTMLCollection 对象，不能用于 NodeList 对象。
• 如果有多个元素具有相同的 id 或者 name 属性，namedItem() 方法只会返回第一个匹配的元素。
• 如果找不到匹配的元素，namedItem() 方法会返回 null。

通过使用 HTMLCollection 的 namedItem() 方法，我们可以方便地根据元素的 id 或者 name 属性来获取特定的元素，从而更加灵活地操作 DOM 元素集合。希望本文对你有所帮助！