JavaScript nextElementSibling 屬性

admin發表於2019-01-13
JavaScript

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.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")[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>

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

a:3:{s:3:\"pic\";s:43:\"portal/202003/28/132732ekh7d7rjsjf1asnh.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

對上述程式碼進行一下分析：

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

谷歌開發者工具控制檯列印效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/202003/28/132800qrqz7z32c22nnn2f.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

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

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

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

a:3:{s:3:\"pic\";s:43:\"portal/202003/28/132809qao0l8bygl7dbj0a.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

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

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

相關文章