Node: previousSibling 属性

Baseline 已广泛支持

此特性已相当成熟,可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来,各浏览器均已提供此特性。

Node 接口的只读 previousSibling 属性返回指定节点在其父节点的 childNodes 列表中紧邻其前面的节点,如果指定节点是列表中的第一个节点,则返回 null

注意: 浏览器会在文档中插入文本节点来表示源标记中的空格。因此,通过 Node.firstChildNode.previousSibling 获取的节点可能指向一个空格文本节点,而不是作者打算获取的实际元素。

有关更多信息,请参阅 在 DOM 中处理空格

您可以使用 previousElementSibling 来获取前一个元素节点(跳过文本节点和任何其他非元素节点)。

要以相反的方向遍历子节点列表,请使用 Node.nextSibling

一个表示当前节点的前一个兄弟节点的 Node,如果没有则为 null

示例

以下示例演示了 previousSibling 在混合了文本节点和元素的场景下以及没有文本节点的情况下的工作方式。

第一个示例

在此示例中,我们有一系列直接相邻的 img 元素,它们之间没有空格。

html
<img id="b0" /><img id="b1" /><img id="b2" />
js
document.getElementById("b1").previousSibling; // <img id="b0">
document.getElementById("b2").previousSibling.id; // "b1"

第二个示例

在此示例中,img 元素之间存在空格文本节点(换行符)。

html
<img id="b0" />
<img id="b1" />
<img id="b2" />
js
document.getElementById("b1").previousSibling; // #text
document.getElementById("b1").previousSibling.previousSibling; // <img id="b0">
document.getElementById("b2").previousSibling.previousSibling; // <img id="b1">
document.getElementById("b2").previousSibling; // #text
document.getElementById("b2").previousSibling.id; // undefined

规范

规范
DOM
# ref-for-dom-node-previoussibling①

浏览器兼容性

另见