JavaScript nextSibling

admin發表於2020-05-27

nextSibling屬性可以返回當前節點下一個緊鄰的兄弟節點,只讀屬性。

再來看MDN文件的闡述,此屬性返回當前節點的父節點的childNodes列表中,緊鄰其後的節點。

上面兩端文字包含了如下主要資訊:

(1).當前節點與返回節點緊鄰,且處於當前節點之後。

(2).當前節點與返回的節點是兄弟節點。

(3).既然是父節點的childNodes列表中,緊鄰其後的節點,那麼返回的節點可以不是元素節點,也可以是文字等節點。

(4).當前節點也不必是元素節點,也可以是文字或者註釋等節點。

如果下一個同級節點不存在,則此屬性返回值是null。

語法結構:

[JavaScript] 純文字檢視 複製程式碼
elementNode.nextSibling

瀏覽器支援:

(1).IE瀏覽器支援此屬性。

(2).edge瀏覽器支援此屬性。

(3).谷歌瀏覽器支援此屬性。

(4).火狐瀏覽器支援此屬性。

(5).opera瀏覽器支援此屬性。

(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 obox=document.getElementById("box");
  let lis=obox.getElementsByTagName("li");
  let oshow=document.getElementById("show");
  let obt=document.getElementById("bt");
  obt.onclick=function(){
    oshow.innerHTML=lis[1].nextSibling.nodeType;
  }
}
</script> 
</head> 
<body> 
<div id="show"></div>
<ul id="box">
  <li>螞蟻部落一</li>
  <li>螞蟻部落二</li>
  <li>螞蟻部落三</li>
  <li>螞蟻部落四</li>
  <li>螞蟻部落五</li>
</ul>
<input type="button" id="bt" value="檢視效果"/>
</body> 
</html>

點選按鈕可以將第二個li元素的節點型別寫入show元素中,程式碼執行效果截圖如下:

a:3:{s:3:\"pic\";s:43:\"portal/201901/06/205133v51coz39kgfn3nxp.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼分析如下:

(1).元素集合的索引從0開始,所以lis[1]獲取的是第二個li元素。

(2).lis[1].nextSibling.nodeType獲取第二個li元素下一個緊鄰兄弟節點的型別,返回3,說明是文字節點。

(3).這時候,可能會有朋友有這樣的疑問,第二個li元素下一個緊鄰節點難道不是第三個li元素嗎,其實並不是,在標準瀏覽器中,空格和換行被解讀為文字節點,這個地方存在一定瀏覽器相容性問題,下面會詳細說明。

瀏覽器相容性分析:

(1).標準瀏覽器包括IE9+,會將空格和換行解析文字節點。

(2).但是在IE8和IE8以下瀏覽器中,會忽略空格和換行,如果在此瀏覽器環境中,上述程式碼返回1。

實際應用中,絕大多數情況可能要獲取緊鄰的下一個元素節點,使用nextElementSibling屬性即可實現。

但是nextElementSibling屬性具有一定的瀏覽器相容性問題,IE8和IE8以下瀏覽器不支援。

如果需要相容所有瀏覽器,可以對nextSibling屬性進行一下處理,程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<script>  
window.onload=function() { 
  let box=document.getElementById("box"); 
  let lis=box.getElementsByTagName("li");
  let show=document.getElementById("show"); 
    
  let theNode=lis[2].nextSibling;   
  while (theNode.nodeType!=1) {     
    theNode=theNode.nextSibling;   
  }   
  show.innerHTML=theNode.innerHTML; 
} 
</script>  
</head>  
<body>  
<div id="show"></div> 
<ul id="box"> 
  <li>螞蟻部落一</li> 
  <li>螞蟻部落二</li> 
  <li>螞蟻部落三</li> 
  <li>螞蟻部落四</li> 
</ul> 
</body>  
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/201901/06/205221ht8lnjt0jgzy2p2t.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述程式碼可以獲取第二個li元素的下一個緊鄰的兄弟元素物件,並將其文字寫入div。

程式碼分析如下:

(1).首先,let theNode=lis[1].nextSibling獲取第二個li元素的緊鄰的下一個兄弟節點,但並不是元素節點。

(2).然後,通過while語句迴圈判斷下一個節點是否是元素節點,那麼再判斷下一個節點的下一個節點是否是元素節點,以此類推,如果是,那麼就不再進行while迴圈,關於while語句參閱JavaScript while 語句一章節。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script> 
window.onload=function(){
  let obox=document.getElementById("box");
  let lis=obox.getElementsByTagName("li");
  let oshow=document.getElementById("show");
  let obt=document.getElementById("bt");
  obt.onclick=function(){
    oshow.innerHTML=lis[1].nextSibling.nodeType;
  }
}
</script> 
</head> 
<body> 
<div id="show"></div>
<ul id="box">
  <li>螞蟻部落一</li>
  <li>螞蟻部落二</li><!--第一個li元素-->
  <li>螞蟻部落三</li>
  <li>螞蟻部落四</li>
  <li>螞蟻部落五</li>
</ul>
<input type="button" id="bt" value="檢視效果"/>
</body> 
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/201901/06/205301m9nljko0ajww7hwn.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上面程式碼的目的是強調一下,nextSibling屬性的返回的節點不僅僅是元素節點,也可能是文字或者註釋等節點。

只要是父元素childNodes屬性可能返回的節點,都有可能是nextSibling屬性的返回值。

相關文章