previoussibling和previouselementsibling javascript之间的区别

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

这个属性和 previousSibling 以前的兄弟姐妹 返回上一个同级节点作为元素节点、文本节点或注释节点,而 上一个元素同级 将上一个同级节点作为元素节点返回(忽略文本和注释节点)。

//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("previousSibling.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>

previousSibling 获取上一个文档节点,该节点不一定是 HTML element .

获取上一个HTML元素 previousElementSibling 是一条路要走。

插图( 以前的兄弟姐妹 ):

<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">

whitespace text nodes (换行符)在img元素之间。

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.

插图( ):

<img id=“b0”>
<img id=“b1”>
<img id=“b2”>

输出:

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

在这里 .previousElementSibling 返回紧跟在其父级的子级列表中指定元素之前的元素 <img id="b0"></img>