DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript基礎知識 >> js nextSibling屬性和previousSibling屬性概述及使用注意
js nextSibling屬性和previousSibling屬性概述及使用注意
編輯:JavaScript基礎知識     
1:nextSibling屬性
該屬性表示當前節點的下一個節點(其後的節點與當前節點同屬一個級別);如果其後沒有與其同級的節點,則返回null。
需要特別注意的是:該屬性在不同的浏覽器中的執行結果並不都相同,見下面例示:
先來看一個例子:
復制代碼 代碼如下:
<body>
<div>
<input id="a4" type="button" onclick="alert(this.nextSibling);" value="d" />
<input id="a5" type="button" onclick="alert(this.nextSibling);" value="e" />
</div>
</bod

該對象的結構表面上看,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等其他常用標簽元素屬性來獲取其屬性。
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved