HTML DOM 属性 item() 方法

item() 方法概述

item() 方法是 HTML DOM 对象的一个属性，用于获取指定位置的子元素。该方法通常用于获取节点列表（如 NodeList 或 HTMLCollection）中的特定元素。item() 方法接受一个参数，即要获取的元素的索引位置，返回该位置的元素对象。

item() 方法语法

item() 方法的语法如下：

element.item(index)

其中，element 是一个节点列表（如 NodeList 或 HTMLCollection），index 是要获取的元素的位置索引。

item() 方法示例

假设我们有一个包含多个 <div> 元素的 NodeList，我们可以使用 item() 方法来获取其中的特定元素。以下是一个示例代码：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
    <title>item() 方法示例</title>
</head>
<body>
    <div>第一个 div 元素</div>
    <div>第二个 div 元素</div>
    <div>第三个 div 元素</div>
    <div>第四个 div 元素</div>

    <script>
        // 获取所有 div 元素
        var divs = document.getElementsByTagName('div');

        // 使用 item() 方法获取第二个 div 元素
        var secondDiv = divs.item(1);
        
        // 输出第二个 div 元素的内容
        console.log(secondDiv.innerHTML);
    </script>
</body>
</html>

在上面的示例中，我们首先通过 document.getElementsByTagName('div') 获取了包含所有 <div> 元素的 NodeList，然后使用 item() 方法获取了第二个 <div> 元素，并输出了它的内容。

item() 方法注意事项

• item() 方法的索引从 0 开始，因此第一个元素的索引为 0，第二个元素的索引为 1，依此类推。
• 如果指定的索引超出了节点列表的范围，item() 方法将返回 null。

结语

通过本文的介绍，相信你已经对 HTML DOM 属性 item() 方法有了更深入的了解。在实际的前端开发中，item() 方法是一个非常实用的属性，可以帮助我们快速定位和操作节点列表中的特定元素。希望本文对你有所帮助，谢谢阅读！