HTML - DOM 元素 nextElementSibling 属性

nextElementSibling 属性提供特定元素序列中紧邻的下一个节点。它跳过不是元素的节点，例如文本或注释节点。

语法

element.nextElementSibling

返回值

nextElementSibling 属性返回一个包含给定元素的下一个兄弟节点的节点。如果不存在下一个兄弟节点，则返回“null”。

HTML DOM 元素“nextElementSibling”属性示例

以下是一些示例，展示了“nextElementSibling”属性的使用，以便更好地理解。

访问和显示下一个兄弟元素

此示例演示如何使用 nextElementSibling 节点访问有关下一个兄弟节点的信息，在本例中为<div>，并在应用突出显示类后显示其内容。

<!DOCTYPE html>
<html lang="en">
<head> 
    <style>
        .highlight {
            color: red;
        }
    </style>
</head>

<body>
    <h1>HTML - DOM Element</h1>
    <h2>nextElementSibling Property</h2>
    <p>Below are the contents of the parent element:</p>
    <div id="parent">
        <p>First paragraph</p>
        <div>Second div</div>
        <span>Span element</span>
        <p>Last paragraph</p>
    </div>

    <div id="output"></div>

    <script>
        // Accessing nextElementSibling
        const firstParagraph = document.querySelector
        ('#parent p');  
        const nextElement = firstParagraph.nextElementSibling;

        const outputDiv = document.getElementById('output');
        outputDiv.innerHTML = `Next sibling element found:
            <span class="highlight">${nextElement.textContent}
            </span>`;        
    </script>
</body>

</html>

处理没有下一个兄弟节点的情况

此示例演示如何使用 nextElementSibling 属性处理给定元素没有下一个兄弟元素的情况。

<!DOCTYPE html>
<html lang="en">
<head> 
    <title>nextElementSibling Example</title>
</head>
<body>
    <h1>HTML - DOM Element</h1>
    <h2>nextElementSibling Property</h2>
    <p>Below are the contents of the parent element:</p>
    <div id="parent">
        <p>First paragraph</p>
    </div>
        
    <div id="output"></div>

    <script>
        // Accessing Sibling when no next sibling exists
        const fp = document.querySelector('#parent p');
        const nextEle = fp.nextElementSibling;

        if (nextEle) {
            document.getElementById('output').textContent
            = `Next sibling element found: 
            ${nextEle.textContent}`;
        } else {
            document.getElementById('output').textContent
            = 'No next sibling element found.';
        }
    </script>
</body>

</html>

支持的浏览器

属性
nextElementSibling	是	是	是	是	是

html_dom_element_reference.htm

打印页面