previousElementSibling 屬性

admin發表於2018-11-08

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）.safria瀏覽器支援此屬性。

程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script> 
window.onload=function(){
  let oli = document.getElementsByTagName("li")[1];
  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/201811/08/145453ycyz4csaghsds4gm.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

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

然後將第一個li元素的內容寫入到div中。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script> 
window.onload=function(){
  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/201811/08/145543efmjr4tgn1grkwmt.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

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

其實這種想法是錯誤的，難道只有元素節點才有緊鄰的統計子節點嗎，文字節點或者註釋節點也是可以的。

這裡只是給一些沒有注意到這一點的朋友做一個提醒，或許能夠避免一些不必要的錯誤。

相關文章