JavaScript nextElementSibling

admin發表於2019-01-13

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元素。

相關文章