JavaScript nextSibling
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元素中,程式碼執行效果截圖如下:
程式碼分析如下:
(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>
程式碼執行效果截圖如下:
上述程式碼可以獲取第二個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>
程式碼執行效果截圖如下:
上面程式碼的目的是強調一下,nextSibling屬性的返回的節點不僅僅是元素節點,也可能是文字或者註釋等節點。
只要是父元素childNodes屬性可能返回的節點,都有可能是nextSibling屬性的返回值。
相關文章
- 相容所有瀏覽器的nextSibling瀏覽器
- js nextSibling屬性和previousSibling屬性JS
- JavaScript高階:JavaScript物件導向,JavaScript內建物件,JavaScript BOM,JavaScript封裝JavaScript物件封裝
- javaScript系列[06]-javaScript和thisJavaScript
- 【JavaScript學習】JavaScript物件建立JavaScript物件
- 【轉】eval()函式(javascript) - [javaScript]函式JavaScript
- JavaScript -"this"JavaScript
- javascript ??JavaScript
- This in JavaScriptJavaScript
- “This” is For JavaScriptJavaScript
- JavaScriptJavaScript
- javascript thisJavaScript
- javaScript系列[05]-javaScript和JSONJavaScriptJSON
- 44 道 JavaScript 難題(JavaScript Puzzlers!)JavaScript
- 【轉向JavaScript系列】AST in Modern JavaScriptJavaScriptAST
- javascript,還是javascript的問題JavaScript
- JavaScript 教程之JavaScript常用框架簡介JavaScript框架
- 《深入理解JavaScript》——2.3 JavaScript有用嗎JavaScript
- 【JavaScript】--JavaScript總結一覽無餘JavaScript
- 【HTML、JAVASCRIPT、CSS】3、Javascript基本概念HTMLJavaScriptCSS
- JavaScript EventJavaScript
- JavaScript BackdoorJavaScript
- JavaScript normalize()JavaScriptORM
- JavaScript setDate()JavaScript
- JavaScript setMinutes()JavaScript
- JavaScript getDate()JavaScript
- JavaScript setHours()JavaScript
- JavaScript setUTCMinutes()JavaScript
- JavaScript setUTCHours()JavaScript
- JavaScript setUTCFullYear()JavaScript
- JavaScript setUTCMonth()JavaScript
- JavaScript setUTCDate()JavaScript
- JavaScript getUTCMinutes()JavaScript
- JavaScript setMonth()JavaScript
- JavaScript getMonth()JavaScript
- JavaScript getMinutes()JavaScript
- JavaScript getYear()JavaScript
- JavaScript getHours()JavaScript