previousSibling、previousElementSibling的区别

previousSibling：获取元素的上一个兄弟节点；（既包含元素节点、文本节点、注释节点）

<div id="box">
<ul id="ul">
<li>第一个</li>
<li id="one">第二个</li>
<li>第三个</li>
</ul>
<p>我是第二个子节点</p>
</div>

var one = document.getElementById("one");
console.log(one.previousSibling.nodeName);//#text

var one = document.getElementById("one");
console.log(one.previousElementSibling.nodeName);//LI

previousElementSibling：获取上一个兄弟元素节点；（只包含元素节点）；

<div id="box">
<ul id="ul">
<li>第一个</li>
<li id="one">第二个</li>
<li>第三个</li>
</ul>
<p>我是第二个子节点</p>
</div>

previousSibling 模拟 previousElementSibling：
<div id="box">
<ul id="ul">
<li>第一个</li>
<li id="one">第二个</li>
<li>第三个</li>
</ul>
<p>我是第二个子节点</p>
</div>

function myPre(ele){
if(ele.previousElementSibling !== undefined){
return ele.previousElementSibling;
}else{
var item = ele.previousSibling;
while(item && item.nodeType !=1){
item = item.previousSibling;
}
return item;
}
}
var oNe = document.getElementById("one");
console.log(myPre(oNe));;

最后

以上就是迷你星月为你收集整理的previousSibling、previousElementSibling的区别的全部内容，希望文章能够帮你解决previousSibling、previousElementSibling的区别所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。