Question

我想知道我的 previoussibling 和 previouselementsibling 之间有什么区别。我尝试过，但没有发现任何可比较或描述此问题的问题或文章。也许这是出于我的一点JavaScript知识，但是如果能解释一下，我将不胜感激。

非常感谢。

Answer 1

previousElementSibling属性在同一树级别返回指定元素的上一个元素。

此属性与previousSibling之间的区别在于，previousSibling返回上一个同级节点作为元素节点，文本节点或注释节点，而previousElementSibling返回上一个同级节点节点作为元素节点（忽略文本和注释节点）。

//Get the second li element
var liElement = document.getElementById( "target" ) ;

//Get the previous element (→ Text node (line feed and tab character))
var previousSibling = liElement.previousSibling ;
console.log("previousElementSibling::"+previousSibling.data);
console.log("previousElementSibling.previousElementSibling::",previousSibling.previousElementSibling);

//Get the previous element (→ <li> Element 3 </ li>)
var previousElementSibling = liElement.previousElementSibling ;
console.log("previousElementSibling::",previousElementSibling);

<ul>
	<li>Element-1</li>↓
	<li id="target">Element-2</li>
	<li>Element-3</li>
</ul>

Answer 2

previousSibling 为您提供前一个文档节点，它不一定是 HTML element。

为了获得前一个 HTML 元素 previousElementSibling 是一种方法。

插图 (previousSibling)：

<img id="b0"><img id="b1"><img id="b2">

在这个例子中，我们有一系列彼此直接相邻的 img 元素，它们之间有 no whitespace。

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

但是：

<img id="b0">
<img id="b1">
<img id="b2">

在本例中，img 元素之间有 whitespace text nodes（换行符）。

document.getElementById("b1").previousSibling;       //  [object Text]

In the above case, it is an empty string that sets between two img items that help to format the HTML document itself.

插图 (previousElementSibling)：

<img id="b0">
<img id="b1">
<img id="b2">

输出：

document.getElementById("b1").previousElementSibling  // <img id="b0"></img>

此处的 .previousElementSibling 返回其父子列表中指定元素之前的元素，即 <img id="b0"></img>

上一个兄弟元素和上一个元素兄弟元素之间的区别

2 个答案: