您的位置:首页> 前端教程> JS教程
文章导航

JavaScript nextSibling

2019-1-6 20:50| 作者: admin| 查看: 982| 评论: 0|来自: 蚂蚁部落

nextSibling属性可以返回当前节点下一个紧邻的兄弟节点,只读属性。

再来看MDN文档的阐述,此属性返回当前节点的父节点的childNodes列表中,紧邻其后的节点。

上面两端文字包含了如下主要信息:

(1).当前节点与返回节点紧邻,且处于当前节点之后。

(2).当前节点与返回的节点是兄弟节点。

(3).既然是父节点的childNodes列表中,紧邻其后的节点,那么返回的节点可以不是元素节点,也可以是文本等节点。

(4).当前节点也不必是元素节点,也可以是文本或者注释等节点。

如果下一个同级节点不存在,则此属性返回值是null。

语法结构:

[JavaScript] 纯文本查看 复制代码
elementNode.nextSibling

浏览器支持:

(1).IE浏览器支持此属性。

(2).edge浏览器支持此属性。

(3).谷歌浏览器支持此属性。

(4).火狐浏览器支持此属性。

(5).opera浏览器支持此属性。

(6).safria浏览器支持此属性。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<script> 
window.onload=function(){
  let obox=document.getElementById("box");
  let lis=obox.getElementsByTagName("li");
  let oshow=document.getElementById("show");
  let 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>

点击按钮可以将第二个li元素的节点类型写入show元素中,代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201901/06/205133v51coz39kgfn3nxp.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

代码分析如下:

(1).元素集合的索引从0开始,所以lis[1]获取的是第二个li元素。

(2).lis[1].nextSibling.nodeType获取第二个li元素下一个紧邻兄弟节点的类型,返回3,说明是文本节点。

(3).这时候,可能会有朋友有这样的疑问,第二个li元素下一个紧邻节点难道不是第三个li元素吗,其实并不是,在标准浏览器中,空格和换行被解读为文本节点,这个地方存在一定浏览器兼容性问题,下面会详细说明。

浏览器兼容性分析:

(1).标准浏览器包括IE9+,会将空格和换行解析文本节点。

(2).但是在IE8和IE8以下浏览器中,会忽略空格和换行,如果在此浏览器环境中,上述代码返回1。

实际应用中,绝大多数情况可能要获取紧邻的下一个元素节点,使用nextElementSibling属性即可实现。

但是nextElementSibling属性具有一定的浏览器兼容性问题,IE8和IE8以下浏览器不支持。

如果需要兼容所有浏览器,可以对nextSibling属性进行一下处理,代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</title> 
<script>  
window.onload=function() { 
  let box=document.getElementById("box"); 
  let lis=box.getElementsByTagName("li");
  let show=document.getElementById("show"); 
    
  let theNode=lis[2].nextSibling;   
  while (theNode.nodeType!=1) {     
    theNode=theNode.nextSibling;   
  }   
  show.innerHTML=theNode.innerHTML; 
} 
</script>  
</head>  
<body>  
<div id="show"></div> 
<ul id="box"> 
  <li>蚂蚁部落一</li> 
  <li>蚂蚁部落二</li> 
  <li>蚂蚁部落三</li> 
  <li>蚂蚁部落四</li> 
</ul> 
</body>  
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201901/06/205221ht8lnjt0jgzy2p2t.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述代码可以获取第二个li元素的下一个紧邻的兄弟元素对象,并将其文本写入div。

代码分析如下:

(1).首先,let theNode=lis[1].nextSibling获取第二个li元素的紧邻的下一个兄弟节点,但并不是元素节点。

(2).然后,通过while语句循环判断下一个节点是否是元素节点,那么再判断下一个节点的下一个节点是否是元素节点,以此类推,如果是,那么就不再进行while循环,关于while语句参阅JavaScript while 语句一章节。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<script> 
window.onload=function(){
  let obox=document.getElementById("box");
  let lis=obox.getElementsByTagName("li");
  let oshow=document.getElementById("show");
  let 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>蚂蚁部落五</li>
</ul>
<input type="button" id="bt" value="查看效果"/>
</body> 
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201901/06/205301m9nljko0ajww7hwn.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上面代码的目的是强调一下,nextSibling属性的返回的节点不仅仅是元素节点,也可能是文本或者注释等节点。

只要是父元素childNodes属性可能返回的节点,都有可能是nextSibling属性的返回值。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部