下一个兄弟节点和下一个兄弟元素
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>
<!-- nextSibling
找到下一个兄弟节点的 文本、注释、标签
没有兼容问题
nextElementSibling
找下一个兄弟元素到标签
IE8和之前的浏览器不支持 -->
<ul>
<li>隔壁老王1</li>
<li>隔壁老王2</li>
<li id="li3">隔壁老王3</li>
<li>隔壁老王4</li>
<li id="li5">隔壁老王5</li>
<li>隔壁老王6</li>
</ul>
<script>
var li3 = document.getElementById('li3');
// 找到 li3 下一个兄弟节点
console.log(li3.nextSibling); // 找到换行文本; #text
// 找到 li3 下一个兄弟元素
console.log(li3.nextElementSibling); // <li>隔壁老王4</li>
// 兼容IE
var li5 = document.getElementById('li5');
//先取下一个兄弟节点
var jian = li5.nextSibling;
while(jian != null && jian.nodeType != 1) {
//继续往下找
jian = jian.nextSibling;
}
console.log(jian); // <li>隔壁老王6</li>
</script>
</body>
</html>
