JavaScript nextElementSibling
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>
程式碼執行效果截圖如下:
程式碼分析如下:
(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>
程式碼執行效果截圖如下:
上述程式碼中,兩個屬性的作用完全相同,都可以返回第三個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>
程式碼執行效果截圖如下:
特別說明:nodeType返回一個數字,用於表示節點的型別,1表示元素節點,3表示文字節點。
與前面的程式碼相比,唯一區別就是將第二個li與第三個li單獨一行排列。
此時,兩個屬性的區別得以體現,nextSibling屬性返回下一個兄弟節點,在標準瀏覽器中,會將空白和換行看做為本節點,第二個li元素後面緊鄰的是空白和換行,所以返回文字節點;nextElementSibling返回下一個兄弟元素節點,那麼會忽略第二個li後面的空白和換行,獲取第三個li元素。
相關文章
- JavaScript nextElementSibling 屬性JavaScript
- JavaScript高階:JavaScript物件導向,JavaScript內建物件,JavaScript BOM,JavaScript封裝JavaScript物件封裝
- [Javascript] How javascript read the property?JavaScript
- javaScript系列[06]-javaScript和thisJavaScript
- javaScript系列[05]-javaScript和JSONJavaScriptJSON
- JavaScriptJavaScript
- JavaScript -"this"JavaScript
- javascript ??JavaScript
- “This” is For JavaScriptJavaScript
- This in JavaScriptJavaScript
- [Javascript] Understanding JavaScript Proxies with Symbol.toPrimitiveJavaScriptSymbolMIT
- 44 道 JavaScript 難題(JavaScript Puzzlers!)JavaScript
- [Javascript] Perform Set Operations using JavaScript Set MethodsJavaScriptORM
- JavaScript 教程之JavaScript常用框架簡介JavaScript框架
- [Javascript] ++operationJavaScript
- JavaScript用法JavaScript
- JavaScript 物件JavaScript物件
- [Javascript] isAsyncFunctionJavaScriptFunction
- [Javascript] isPromiseLikeJavaScriptPromise
- [Javascript] yield*JavaScript
- Promise in JavascriptPromiseJavaScript
- Javascript HookJavaScriptHook
- JavaScript LetJavaScript
- JavaScript ConstJavaScript
- JavaScript insertAdjacentHTML()JavaScriptHTML
- JavaScript matches()JavaScript
- JavaScript contains()JavaScriptAI
- JavaScript getFullYear()JavaScript
- JavaScript setFullYear()JavaScript
- JavaScript setTime()JavaScript
- JavaScript setSeconds()JavaScript
- JavaScript setMinutes()JavaScript
- JavaScript getDate()JavaScript
- JavaScript setHours()JavaScript
- JavaScript setDate()JavaScript
- JavaScript toUTCString()JavaScript
- JavaScript toGMTString()JavaScript
- JavaScript toDateString()JavaScript