HTML DOM previousSibling 属性

什么是 previousSibling 属性

在 DOM 中，每个元素节点都有一个 previousSibling 属性，用于访问其前一个同级元素。这个属性返回的是一个节点对象，可以是元素节点、文本节点或注释节点。

如何使用 previousSibling 属性

要使用 previousSibling 属性，首先需要获取到当前元素的父元素，然后通过 previousSibling 属性来访问前一个同级元素。下面是一个简单的示例代码：

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

    <script>
        const parent = document.getElementById('parent');
        const secondChild = parent.children[1];
        const previousSibling = secondChild.previousSibling;

        console.log(previousSibling);
    </script>
</body>
</html>

在上面的示例中，我们首先获取了 id 为 parent 的父元素，然后通过 children 属性获取到第二个子元素，最后使用 previousSibling 属性获取到第一个子元素，并将其输出到控制台。

注意事项

• 如果前一个同级元素是文本节点或注释节点，那么 previousSibling 属性返回的就是该文本节点或注释节点。
• 如果前一个同级元素不存在，previousSibling 属性返回 null。

总结

在本文中，我们学习了 HTML DOM 中的 previousSibling 属性的用法和示例。通过掌握这个属性，我们可以更方便地操作网页中的元素。希望本文对你有所帮助，谢谢阅读！