JavaScript nextSibling

红太狼 2020-05-27 12:25 682阅读 0赞

# JavaScript nextSibling

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.dandelioncloud.cn/" />
<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>
```

下面对上述代码进行一下分析：

（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.dandelioncloud.cn/" /> 
<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>
```

代码分析如下：

（1）.let theNode=lis[1].nextSibling 获取第二个li元素的紧邻的下一个兄弟节点，但并不是元素节点。

（2）.通过 while 语句循环判断下一个节点是否是元素节点，那么再判断下一个节点的下一个节点是否是元素节点，以此类推，如果是，那么就不再进行 while 循环。

```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="https://www.dandelioncloud.cn/" />
<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>
```

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

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

```javascript
node.nextSibling
```

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