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

列印頁面