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

打印页面