JavaScript previousElementSibling

小灰灰 2020-06-02 14:30 614阅读 0赞

# JavaScript previousElementSibling

previousElementSibling 属性可以获取当前节点紧邻的上一个同级元素节点，只读属性。

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

（1）.previous：前一个。

（2）.element：元素。

（3）.sibling：兄弟。

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

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

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

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

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

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

语法结构：

```javascript
prevElemNode = node.previousElementSibling
```

**浏览器兼容：**

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

第三个 li 元素的上一个同级元素节点自然是第二 li 元素。

然后将第二个li元素的内容（蒲公英云二）写入 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 previousEleLi = childNodes[4].previousElementSibling;
  oShow.innerHTML = previousEleLi.innerHTML;
}
</script>
</head>
<body>
<ul>
  <li>蒲公英云一</li>
  <li>蒲公英云二</li>
  <li>蒲公英云三</li>
  <li>蒲公英云四</li>
  <li>蒲公英云五</li>
</ul>
<div id="show"></div>
</body>
</html>
```

首先看一下谷歌开发者工具控制打印内容：

![](/images/1591108218663.png)

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

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

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

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