HTML DOM previousElementSibling 属性

什么是 previousElementSibling 属性

previousElementSibling 属性是 DOM 中的一个属性，用于获取指定元素的前一个兄弟元素（不包括文本节点或注释节点）。该属性返回一个元素节点，如果不存在前一个兄弟元素，则返回 null。

如何使用 previousElementSibling 属性

要使用 previousElementSibling 属性，首先需要获取到需要操作的元素。然后通过该元素的 previousElementSibling 属性来获取其前一个兄弟元素。

下面是一个简单的示例代码，演示了如何使用 previousElementSibling 属性来获取前一个兄弟元素：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
    <title>previousElementSibling 示例</title>
</head>
<body>
    <div id="parent">
        <div>第一个子元素</div>
        <div>第二个子元素</div>
        <div>第三个子元素</div>
    </div>

    <script>
        // 获取第二个子元素
        var element = document.getElementById('parent').children[1];
        
        // 获取第二个子元素的前一个兄弟元素
        var previousElement = element.previousElementSibling;

        // 输出前一个兄弟元素的文本内容
        console.log(previousElement.textContent);
    </script>
</body>
</html>

在上面的示例代码中，我们首先获取了 id 为 parent 的父元素下的第二个子元素。然后通过该子元素的 previousElementSibling 属性，获取到了其前一个兄弟元素，并输出了该兄弟元素的文本内容。

总结

通过使用 previousElementSibling 属性，我们可以轻松地获取到指定元素的前一个兄弟元素，从而方便地进行 DOM 操作。在实际开发中，我们可以根据具体的需求来灵活运用该属性，提高开发效率。