js的nextSibling属性用法简单介绍

js的nextSibling属性用法简单介绍:
此属性可以返回当前节点的下一个同级节点。
如果下一个同级节点不存在,则此属性返回值是null。
语法结构:

elementNode.nextSibling

代码实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<script type="text/javascript"> 
window.onload=function(){
  var obox=document.getElementById("box");
  var lis=obox.getElementsByTagName("li");
  var oshow=document.getElementById("show");
  var obt=document.getElementById("bt");
  obt.onclick=function(){
    oshow.innerHTML=lis[1].nextSibling.nodeType;
  }
}
</script> 
</head> 
<body> 
<div id="show"></div>
<ul id="box">
  <li>蚂蚁部落一</li>
  <li>蚂蚁部落二</li>
  <li>蚂蚁部落三</li>
  <li>蚂蚁部落四</li>
  <li>蚂蚁部落五</li>
</ul>
<input type="button" id="bt" value="查看效果"/>
</body> 
</html>

以上代码可以获取下一个节点的类型,并将类型写入div元素中去。
浏览器兼容:
此属性具有一定的浏览器兼容性问题,在IE9和IE9以上浏览器还有谷歌或者火狐等标准浏览器中,空白和换行算作文本节点,但是在IE9以下浏览器中,会忽略空白和换行。
相关阅读:
1.nodeType属性可以参阅js的nodeType属性用法简单介绍一章节。
2.节点相关内容可以参阅javascript的DOM元素节点操作简单介绍一章节。

原文地址是:js的nextSibling属性用法简单介绍一章节。

你可能感兴趣的:(js的nextSibling属性用法简单介绍)