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①

瀏覽器相容性

另見