HTML - DOM 元素 nextSibling 屬性

nextSibling 屬性用於訪問 DOM 樹中當前節點之後緊鄰的下一個節點。

語法

element.nextSibling

返回值

nextSibling 屬性返回指定 DOM 元素的指定節點的下一個兄弟節點。

HTML DOM 元素 'nextSibling' 屬性示例

以下是一些示例，演示了 'nextSibling' 屬性的用法，以便更好地理解。

獲取下一個兄弟節點

此示例幫助我們瞭解如何使用 nextSibling 屬性訪問和顯示 HTML 文件中兄弟節點的資訊。

<!DOCTYPE html>
<html>
<head> 
    <style> 
    #output1 {
        border: 1px solid #ccc;
        padding: 10px;
        margin-top: 10px;
    }
    </style>
</head>

<body>
    <h1>HTML - DOM Element</h1>
    <h2>nextSibling Property</h2>
    <p>Below are the div Contents..</p>
    <div id="parent1">
    <div id="first">First</div>
    Text node in between
    <div id="second">Second</div>
    </div>
    
    <div id="output1">
        Fetching the next sibling node after 'First'.
    </div>
    
    <script>
    const firstDiv = document.getElementById('first');
            
    const outputDiv = document.getElementById('output1');
    
        outputDiv.innerHTML += `<p>Next Sibling Node: 
        <strong>${firstDiv.nextSibling.nodeName}
        </strong></p>`;
        outputDiv.innerHTML += `<p>Content: "
        ${firstDiv.nextSibling.textContent.trim()}"</p>`;
    
    </script>
</body>

</html>

遍歷兄弟節點

此示例顯示瞭如何使用 nextSibling 屬性迭代並顯示輸出，顯示 id 為 "parent2" 的元素中每個兄弟 <div> 的文字內容。

<!DOCTYPE html>
<html>
<head> 
    <style> 
    .output {
        border: 1px solid #ccc;
        padding: 10px;
        margin-top: 10px;
    }
    </style>
</head>
<body>
    <h1>HTML - DOM Element</h1>
    <h2>nextSibling Property</h2> 
    <p>Original div content:</p>
    <div id="parent2">
        <div>First</div>
        <div>Second</div>
        <div>Third</div>
    </div>
    
    <div class="output" id="output2">
        Iterating over the child nodes:
    </div>
    
    <script>
        const parentDiv=document.getElementById('parent2');
        let currentEle = parentDiv.firstElementChild;
        let outputText = '';
        
        // Iterate through each child node
        while (currentEle) {
            outputText+=`<p>${currentEle.textContent}</p>`;
            currentEle=currentEle.nextElementSibling;
        }
        const outputDiv=document.getElementById('output2');
        outputDiv.innerHTML += outputText;
    </script>
</body>

</html>

支援的瀏覽器

屬性
nextSibling	是	是	是	是	是

html_dom_element_reference.htm

列印頁面