HTML - DOM NodeList item() 方法

HTML DOM NodeList item() 方法用于根据参数中指定的索引从节点列表中获取节点。

语法

nodelist.item(index);
// Or
nodelist[index];

参数

此方法接受一个参数，如下所示。

参数	描述
索引	它表示您要访问的节点列表中节点的索引。索引从 0 开始。

返回值

它返回指定索引处的元素，如果索引超出范围则返回 null。

HTML DOM Nodelist 'item()' 方法示例

以下示例说明了 Nodelist item() 方法的各种实现。

获取 HTML 元素的内容

以下示例返回类名为“example”的第一个<p>元素的内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Nodelist item() Method
    </title>
</head>
<body>
    <p class="example">
        First Para with example
    </p>
    <p class="example">
        second Para with example
    </p>
    <p class="example">
        Third Para with example
    </p>
    <p class="new">para with new</p>
    <p>
        Click to get content of first p 
        element with class name="example"
    </p>
    <button onclick="fun()">Click me</button>
    <p id="para"></p>
    <script>
        function fun() {
            let x = document.getElementsByClassName("example").item(0).innerHTML;
            document.getElementById("para").innerHTML = x;
        }
    </script>
</body>
</html>

获取 HTML 元素内容的另一种方法

以下示例使用nodelist[index]方法返回类名为“example”的第一个<p>元素的内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Nodelist item() Method
    </title>
</head>
<body>
    <p class="example">
        First Para with example
    </p>
    <p class="example">
        second Para with example
    </p>
    <p class="example">
        Third Para with example
    </p>
    <p class="new">para with new</p>
    <p>
        Click to get content of first p 
        element with class name="example"
    </p>
    <button onclick="fun()">Click me</button>
    <p id="para"></p>
    <script>
        function fun() {
            let x = document.getElementsByClassName("example")[1].innerHTML;
            document.getElementById("para").innerHTML = x;
        }
    </script>
</body>
</html>

更改元素的内容

以下示例更改第一个 span 元素的内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Nodelist item() Method
    </title>
</head>
<body>
    <span>
        I am span element to be changed.
    </span><br>
    <span>I am constant span.</span>
    <p>
        Click to change the content of first 
        span element.
    </p>
    <button onclick="fun()">Click me</button>
    <script>
        function fun() {
            let x = document.getElementsByTagName("span")
            x.item(0).innerHTML = "Now the content has been changed";
        }
    </script>
</body>
</html>

更改内容的样式

在以下示例中，我们使用nodelist[index] 方法更改了文本的背景颜色和字体颜色。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Nodelist item() Method
    </title>
</head>
<body>
    <p>
        Click to change the background color
        of following paragraphs.
    </p>
    <button onclick="fun()">Click me</button>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
    <p>Paragraph 3</p>
    <script>
        function fun() {
            let x = document.getElementsByTagName("p");
            for (let i = 0; i < x.length; i++) {
                x[i].style.color = "white";
                x[0].style.backgroundColor = "#04af2f";
                x[i + 1].style.backgroundColor = "red";
            }
        }
    </script>
</body>
</html>

支持的浏览器

方法
item()	是 1	是 12	是 1	是 1	是 12.1

html_dom_nodelist_reference.htm

打印页面