码迷,mamicode.com
首页 > Web开发 > 详细

js的nextSibling属性用法简单介绍

时间:2015-09-28 00:02:52      阅读:206      评论:0      收藏:0      [点我收藏+]

标签:

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元素节点操作简单介绍一章节。

原文地址是:nextSibling用法。

js的nextSibling属性用法简单介绍

标签:

原文地址:http://www.cnblogs.com/xiaofinder/p/4842936.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!