JavaScript previousElementSibling

admin發表於2018-11-08
JavaScript

previousElementSibling 屬性可以獲取當前節點緊鄰的上一個同級元素節點，只讀屬性。

為了便於記憶和理解，previousElementSibling 可以分解成三個單詞：

（1）.previous：前一個。

（2）.element：元素。

（3）.sibling：兄弟。

由此可以得出，此屬性返回的節點必須要滿足三個條件：

（1）.必須是元素節點。

（2）.必須是同級節點。

（3）.必須是緊鄰的上一個節點。

如果不存在同時滿足上述條件的節點，那麼此屬性返回 null。

功能與 previousSibling 屬性類似，唯一的不同是：

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.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 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>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/202003/27/222107bg3z1egvvz3yv69x.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

第三個 li 元素的上一個同級元素節點自然是第二 li 元素。

然後將第二個li元素的內容（螞蟻部落二）寫入 div 。

[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 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>

首先看一下谷歌開發者工具控制列印內容：

a:3:{s:3:\"pic\";s:43:\"portal/201811/08/145525xour3qno9botm3b6.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

控制檯列印內容是 3，說明 ul 元素下索引值為 4 的子節點是文字節點。

在標準瀏覽器中，空格與換行被解讀為文字節點。

再來看頁面 div 中顯示的內容，截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/202003/27/222525k2wwzq1222ro7fzz.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

很多朋友下意識的認為 previousElementSibling 等類似屬性的引用者總是元素節點物件。

這種想法是錯誤的，不僅元素節點才有緊鄰的同級節點，文字節點或註釋節點也可以有。

相關文章