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

JavaScript nextSibling

2020-5-27 18:08| 作者: admin| 查看: 1663| 评论: 0|来自: 蚂蚁部落

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

如果不具有对应的节点,此属性返回 null。

返回的节点具有如下特点:

(1).必须是兄弟节点。

(2).必须是紧邻节点。

(3).必须是下一个节点。

此属性无节点类型限制,这一点与 nextElementSibling 不同。

语法结构:

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

浏览器支持:

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

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

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

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

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

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

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="https://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
ul {
  width :150px;
  list-style-type: none;
  border: 2px dotted green;
  padding-left:10px
}
ul li {
  height :25px;
  line-height :25px;
  font-size :12px;
  padding: 0;
}
#show {
  width :160px;
  border: 2px dotted green;
  text-align: center;
  font-size: 12px;
}
</style>
<script> 
window.onload = ()=> {
  let oBbox = document.getElementById("box");
  let lis = oBbox.getElementsByTagName("li");
  let oShow = document.getElementById("show");
  oShow.innerHTML = lis[1].nextSibling.nodeType;
}
</script> 
</head> 
<body> 
<ul id="box">
  <li>蚂蚁部落一</li>
  <li>蚂蚁部落二</li>
  <li>蚂蚁部落三</li>
  <li>蚂蚁部落四</li>
  <li>蚂蚁部落五</li>
</ul>
<div id="show"></div>
</body> 
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/202003/28/121253eeaya0f4x11e1hz2.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="https://www.softwhy.com/" /> 
<title>蚂蚁部落</title> 
<style>
ul {
  width :150px;
  list-style-type: none;
  border: 2px dotted green;
  padding-left:10px
}
ul li {
  height :25px;
  line-height :25px;
  font-size :12px;
  padding: 0;
}
#show {
  width :160px;
  border: 2px dotted green;
  text-align: center;
  font-size: 12px;
}
</style>
<script>  
window.onload = ()=> { 
  let oBox = document.getElementById("box"); 
  let lis = oBox.getElementsByTagName("li");
  let oShow = document.getElementById("show"); 
     
  let theNode = lis[2].nextSibling;   
  while (theNode.nodeType!=1) {     
    theNode = theNode.nextSibling;   
  }   
  show.innerHTML = theNode.innerHTML; 
} 
</script>  
</head>  
<body>  
<ul id="box"> 
  <li>蚂蚁部落一</li> 
  <li>蚂蚁部落二</li> 
  <li>蚂蚁部落三</li> 
  <li>蚂蚁部落四</li> 
</ul> 
<div id="show"></div> 
</body>  
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/202003/28/121439gc32jc774iacjv4b.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

代码分析如下:

(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="https://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
ul {
  width :150px;
  list-style-type: none;
  border: 2px dotted green;
  padding-left:10px
}
ul li {
  height :25px;
  line-height :25px;
  font-size :12px;
  padding: 0;
}
#show {
  width :160px;
  border: 2px dotted green;
  text-align: center;
  font-size: 12px;
}
</style>
<script> 
window.onload= ()=> {
  let oBox = document.getElementById("box");
  let lis = oBox.getElementsByTagName("li");
  let oShow = document.getElementById("show");
  oShow.innerHTML = lis[1].nextSibling.nodeType;
}
</script> 
</head> 
<body> 
<ul id="box">
  <li>蚂蚁部落一</li>
  <li>蚂蚁部落二</li><!--蚂蚁部落注释-->
  <li>蚂蚁部落三</li>
  <li>蚂蚁部落四</li>
  <li>蚂蚁部落五</li>
</ul>
<div id="show"></div>
</body> 
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/202003/28/121516dz8vcmzznpzxvnq3.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

nextSibling 属性返回的节点不仅是元素节点,也可能是文本或者注释等节点。

此属性的引用对象也不仅仅是元素节点对象,也可以是文本或者注释等节点对象。

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

node 也可以是文本或者注释等节点对象,不再通过代码实例演示。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部