JavaScript nextElementSibling

admin發表於2019-01-13
JavaScript

nextElementSibling屬性返回當前節點的下一個兄弟元素節點，HTML5新增。

如果不存在一個這樣的元素節點，則屬性返回null。

考慮到低版本IE瀏覽器的相容問題，很多時候，通過對nextSibling進行相容性處理，以達到nextElementSibling屬性相同的效果，相信未來此屬性一定會得到廣泛應用，此屬性與nextSibling屬性非常類似，在某些場景下甚至表現完全相同。

首先簡單介紹一下兩個屬性之間的區別，屬性的名稱體現了兩者的本質區別，nextElementSibling屬性多了一個"element"限定，也就是說此屬性返回的節點必須滿足如下兩個條件，首先必須是兄弟節點，第二個必須是元素節點；nextSibling返回下一個兄弟節點，沒有"element"限定，可以是元素節點，也可以是文字或註釋等節點，更加博愛寬容，但是很多時候寬容與博愛不但無用，甚至有害，這也是nextElementSibling屬性的價值所在。

關於nextSibling屬性基本用法可以參閱JavaScript nextSibling一章節。

語法結構：

[JavaScript] 純文字檢視 複製程式碼
elementNodeReference.nextElementSibling;

瀏覽器支援：

（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>
<style>
ul li{
  list-style-type:none;
  text-align:left;
  font-size:14px;
}
</style>
<script> 
window.onload=()=>{
  let li = document.getElementsByTagName("li")[1];
  let ant = document.getElementById("ant");
  let bottom = document.getElementById("bottom");
  let nextLi = li.nextElementSibling;
  ant.innerHTML = nextLi.innerHTML;
}
</script>
</head>
<body>
  <ul>
    <li>螞蟻部落歡迎您的到來</li>
    <li>只有努力才會有美好的明</li>
    <li>沒有人一開始就是高手，都是從菜鳥開始</li>
    <li>每一天都是新的需要好好珍惜</li>
    <li>怨天尤人是沒有任何作用的</li>
    <li>今天你寫程式碼了嗎</li>
    <li>本站的url地址是www.softwhy.com</li>
  </ul>
  <div id="ant"></div>
</body>
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/201901/13/110122ozk0zr113u3dh363.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼分析如下：

（1）.集合元素的索引從0開始，所以document.getElementsByTagName("li")[1]獲取第二個li元素。

（2）.那麼第二個li元素的下一個兄弟元素節點自然是第三個li元素。

（3）.最後，將第三個li元素的內容寫入div。

可以看到nextElementSibling屬性返回的一定是元素節點，這也正是它與nextSibling屬性的本質區別。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
ul li{
  list-style-type:none;
  text-align:left;
  font-size:14px;
}
</style>
<script> 
window.onload=()=>{
  let li = document.getElementsByTagName("li")[1];
  let ant = document.getElementById("ant");
  let bottom = document.getElementById("bottom");
  let str="";
  li.nextElementSibling;
  li.nextSibling;
  str=str+"nextElementSibling："+li.nextElementSibling.innerHTML+"<br>";
  str=str+"nextSibling："+li.nextSibling.innerHTML
  ant.innerHTML = str;
}
</script>
</head>
<body>
  <ul>
    <li>螞蟻部落一</li>
    <li>螞蟻部落二</li><li>螞蟻部落三</li>
    <li>螞蟻部落四</li>
    <li>螞蟻部落五</li>
    <li>螞蟻部落六</li>
    <li>螞蟻部落七</li>
  </ul>
  <div id="ant"></div>
</body>
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/201901/13/110203yzxlan48lm1v2z4l.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述程式碼中，兩個屬性的作用完全相同，都可以返回第三個li元素。

當然我們知道兩個屬性是有差別的，再來看一段程式碼例項，演示了兩者的區別：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
ul li{
  list-style-type:none;
  text-align:left;
  font-size:14px;
}
</style>
<script> 
window.onload=()=>{
  let li = document.getElementsByTagName("li")[1];
  let ant = document.getElementById("ant");
  let bottom = document.getElementById("bottom");
  let str="";
  li.nextElementSibling;
  li.nextSibling;
  str=str+"nextElementSibling返回元素型別"+li.nextElementSibling.nodeType+"<br>";
  str=str+"nextSibling返回元素型別"+li.nextSibling.nodeType
  ant.innerHTML = str;
}
</script>
</head>
<body>
  <ul>
    <li>螞蟻部落歡迎您的到來</li>
    <li>只有努力才會有美好的明</li>
    <li>沒有人一開始就是高手，都是從菜鳥開始</li>
    <li>每一天都是新的需要好好珍惜</li>
    <li>怨天尤人是沒有任何作用的</li>
    <li>今天你寫程式碼了嗎</li>
    <li>本站的url地址是www.softwhy.com</li>
  </ul>
  <div id="ant"></div>
</body>
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/201901/13/110237tcfezfmifmc0e5s5.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

特別說明：nodeType返回一個數字，用於表示節點的型別，1表示元素節點，3表示文字節點。

與前面的程式碼相比，唯一區別就是將第二個li與第三個li單獨一行排列。

此時，兩個屬性的區別得以體現，nextSibling屬性返回下一個兄弟節點，在標準瀏覽器中，會將空白和換行看做為本節點，第二個li元素後面緊鄰的是空白和換行，所以返回文字節點；nextElementSibling返回下一個兄弟元素節點，那麼會忽略第二個li後面的空白和換行，獲取第三個li元素。

相關文章