Node: previousSibling 属性
Node 接口的只读 previousSibling 属性返回指定节点在其父节点的 childNodes 列表中紧邻其前面的节点,如果指定节点是列表中的第一个节点,则返回 null。
注意: 浏览器会在文档中插入文本节点来表示源标记中的空格。因此,通过 Node.firstChild 或 Node.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① |
浏览器兼容性
加载中…