HTML | DOM previousSibling 属性

previousSibling 属性返回指定元素之前紧邻的兄弟元素。它是一个只读属性，可以通过 JavaScript 来访问。

语法

node.previousSibling

其中，node 是要获取兄弟元素前一个元素的元素节点。

返回值

• 如果指定元素之前紧邻的兄弟元素是文本节点或注释节点，则返回该节点。
• 如果指定元素之前没有兄弟元素，则返回 null。

示例

例如，在以下 HTML 中，我们通过 JavaScript 获取 li2 的 previousSibling，即它之前的紧邻的兄弟元素：

<ul>
  <li>li1</li>
  <li id="li2">li2</li>
  <li>li3</li>
</ul>

const li2 = document.getElementById("li2");
console.log(li2.previousSibling); // li1

如果我们将 li2 改为：

<ul>
  <li>li1</li>
  <p>paragraph</p>
  <li id="li2">li2</li>
  <a href="#">link</a>
  <li>li3</li>
</ul>

那么获取 li2 的 previousSibling，即它之前的紧邻的兄弟元素，将会是 <p> 元素，而不是 li1。这是因为 li1 前还有一个文本节点，而紧邻的兄弟元素是指与该元素同一级的元素节点。

总结

previousSibling 属性用于获取指定元素的兄弟元素中位于其前面的元素。需要注意的是，它只能获取紧邻的兄弟元素，而且不管是什么类型的节点，只要是位于指定元素之前的紧邻元素都可以被获取。