上一个兄弟节点和上一个兄弟元素
2019-05-10 本文已影响0人
椋椋夜色
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> 上一个兄弟节点和上一个兄弟元素 </title>
</head>
<body>
<!-- previousSibling
找到上一个兄弟节点（包括文本、注释、标签）,所有浏览器都支持
previousElementSibling
找到上一个兄弟元素（只会找到标签），IE8和之前浏览器不支持 -->
<ul>
<li id="li1">隔壁老王1</li>
<li>隔壁老王2</li>
<li id="li3">隔壁老王3</li>
<li>隔壁老王4</li>
<li id="li5">隔壁老王5</li>
</ul>
<script>
var li1 = document.getElementById('li1');
var li3 = document.getElementById('li3');
// 找到 li1 的上一个兄弟节点
console.log(li1.previousSibling); // 找到换行文本; #text
// 找到 li1 的上一个兄弟元素
console.log(li1.previousElementSibling); // null
// 找到 li3 的上一个兄弟节点
console.log(li3.previousSibling); // 找到换行文本; #text
// 找到 li3 的上一个兄弟元素
console.log(li3.previousElementSibling); // <li>隔壁老王2</li>
// 兼容IE
var li5 = document.getElementById('li5');
//先找一下它的上一个兄弟节点，判断一下是不是标签，如果是就拿来用，如果不是就继续往上找
var jian = li5.previousSibling;
// 如果node不等于null 而且还不等于标签，那么就继续往上找
// 因为如果等于null代表找到头了，没必要再往上找
while (jian != null && jian.nodeType != 1) {
//不是标签要继续找上一个的上一个
jian = jian.previousSibling;
}
//如果是标签就跳出循环了
console.log(jian); // <li>隔壁老王4</li>
</script>
</body>
</html>
