首页 > 网站 > WEB开发 > 正文

js的nextSibling属性用法简单介绍

2024-04-27 15:01:23
字体:
来源:转载
供稿:网友

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一章节。


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表