JavaScript nextElementSibling 属性

红太狼 2020-05-27 12:55 1543阅读 1赞

# JavaScript nextElementSibling 属性

nextElementSibling 属性返回当前节点的下一个兄弟元素节点，只读属性。

为了便于记忆和理解，nextElementSibling 可以分解成三个单词：

（1）.next：下一个。

（2）.element：元素。

（3）.sibling：兄弟。

由此可以得出，此属性返回的节点必须要满足三个条件：

（1）.必须是元素节点。

（2）.必须是同级节点。

（3）.必须是紧邻的下一个节点。

如果不存在同时满足上述条件的节点，那么此属性返回 null。

功能与  nextSibling  属性类似，唯一的不同是：

nextSibling 没有对节点的类型做限定，而 nextElementSibling 限定必须是元素节点。

语法结构：

```javascript
node.nextElementSibling;
```

**浏览器支持：**

（1）.IE9+ 浏览器支持此属性。

（2）.edge 浏览器支持此属性。

（3）.谷歌浏览器支持此属性。

（4）.opera 浏览器支持此属性。

（5）.火狐浏览器支持此属性。

（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 oLi = document.getElementsByTagName("li")[1];
  let oShow = document.getElementById("show");
  let nextLi = oLi.nextElementSibling;
  oShow.innerHTML = nextLi.innerHTML;
}
</script>
</head>
<body>
  <ul>
    <li>蒲公英云一</li>
    <li>蒲公英云二</li>
    <li>蒲公英云三</li>
    <li>蒲公英云四</li>
    <li>蒲公英云五</li>
  </ul>
  <div id="show"></div>
</body>
</html>
```

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

（1）.li 元素在集合中的索引位置从 0 开始计算。

（2）.于是，let oLi = document.getElementsByTagName("li")[1]获取第二个 li 元素。

（3）.那么，第二个 li 元素的下一个元素节点就是第三个 li 元素。

（4）.最后将文本"蒲公英云三" 写入 div 元素。

```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 oUl = document.getElementsByTagName("ul")[0];
  let childNodes=oUl.childNodes;
  let oShow = document.getElementById("show");
  console.log(childNodes[4].nodeType);
  let nextEleLi = childNodes[4].nextElementSibling;
  oShow.innerHTML = nextEleLi.innerHTML;
}
</script>
</head>
<body>
<ul>
  <li>蒲公英云一</li>
  <li>蒲公英云二</li>
  <li>蒲公英云三</li>
  <li>蒲公英云四</li>
  <li>蒲公英云五</li>
</ul>
<div id="show"></div>
</body>
</html>
```

谷歌开发者工具控制台打印效果截图如下：

![](/images/1590584098132.png)

控制台打印内容是 3，说明 ul 元素下索引值为 4 的子节点是文本节点。

在标准浏览器中，空格与换行被解读为文本节点。

很多朋友下意识的认为 nextElementSibling 等类似属性的引用者总是元素节点对象。

这种想法是错误的，不仅元素节点才有紧邻的同级节点，文本节点或注释节点也可以有。