js nextSibling屬性和previousSibling屬性

zy178327331發表於2009-08-06
JS

js nextSibling屬性和previousSibling屬性

           1：nextSibling屬性

        該屬性表示當前節點的下一個節點（其後的節點與當前節點同屬一個級別）；如果其後沒有與其同級的節點，則返回null。

       需要特別注意的是：該屬性在不同的瀏覽器中的執行結果並不都相同，見下面例示：

      先來看一個例子：

 

view plaincopy to clipboardprint?
  1. <body>   
  2. <div>   
  3. <input id="a4" type="button" onclick="alert(this.nextSibling);" value="d" />   
  4. <input id="a5" type="button" onclick="alert(this.nextSibling);" value="e" />   
  5. </div>   
  6. </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等其他常用標籤元素屬性來獲取其屬性。

相關文章