首頁 > web前端 > js教程 > js nextSibling屬性和previousSibling屬性概述及使用注意_基礎知識

js nextSibling屬性和previousSibling屬性概述及使用注意_基礎知識

WBOY
發布: 2016-05-16 17:41:46
原創
1449 人瀏覽過
1:nextSibling屬性
此屬性表示目前節點的下一個節點(其後的節點與目前節點同屬一個層級);如果其後沒有與其同級的節點,則傳回null。
需要特別注意的是:該屬性在不同的瀏覽器中的執行結果並不都相同,見下面例示:
先來看一個例子:
複製程式碼 程式碼如下:








該物件的結構表面上看,div的nextSibling只有2項-兩個input節點。但實際上有5項——/n,input,/n,input,/n。這是因為input作為創建各種表單輸入控件的標籤,無論是生成button、checkbox、radio...等或其他表單控件,IE都會自動在後面創建一個1字節位的空白。
IE將跳過在節點之間產生的空格文檔節點(如:換行字符),而Mozilla不會這樣——FF會把諸如空格換行之類的排版元素視作節點讀取,因此,在ie中用nextSibling便可讀取到的下一個節點元素,在FF中就需要這樣寫:nextSibling.nextSibling了。
opera和safari對nextSibling的處理方式與FF一致

2:previousSibling屬性
此屬性與nextSibling屬性的作用正好相反。例如:someTagObject.nextSibling.previousSibling其實回傳的是該標籤元素本身,但前提必須是:該標籤元素的後面必須有一個同級的元素,否則就回傳null了。

3:透過nextSibling或previousSibling所獲得的HTML標籤元素物件的屬性問題
一般先透過nextSibling.nodeName來獲知其標籤名,或透過nextSibling.nodeType來獲知其標籤類型,然後,如果該nextSibling.nodeName = #text,則透過nextSibling.nodeValue來獲知其文字值;否則,可以透過nextSibling.innerHTML等其他常用標籤元素屬性來取得其屬性。
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板