你的位置:首页 > Java教程

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

原文地址是:nextSibling一章节。