js nextSibling屬性和previousSibling屬性概述及使用注意

更新時(shí)間：2013年02月16日 08:57:21 作者：

nextSibling屬性:該屬性表示當(dāng)前節(jié)點(diǎn)的下一個(gè)節(jié)點(diǎn)；如果其后沒有與其同級(jí)的節(jié)點(diǎn)，則返回null;previousSibling屬性:該屬性與nextSibling屬性的作用正好相反,接下來將詳細(xì)介紹下，感興趣的你不妨了解下哦，或許對(duì)你有所幫助

1：nextSibling屬性
該屬性表示當(dāng)前節(jié)點(diǎn)的下一個(gè)節(jié)點(diǎn)（其后的節(jié)點(diǎn)與當(dāng)前節(jié)點(diǎn)同屬一個(gè)級(jí)別）；如果其后沒有與其同級(jí)的節(jié)點(diǎn)，則返回null。
需要特別注意的是：該屬性在不同的瀏覽器中的執(zhí)行結(jié)果并不都相同，見下面例示：
先來看一個(gè)例子：

復(fù)制代碼代碼如下:

 
<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 

該對(duì)象的結(jié)構(gòu)表面上看，div的nextSibling只有2項(xiàng)——兩個(gè)input節(jié)點(diǎn)。但實(shí)際上有5項(xiàng)——/n,input,/n,input,/n。這是因?yàn)閕nput作為創(chuàng)建各種表單輸入控件的標(biāo)簽，無(wú)論是生成button、checkbox、radio...等或其他表單控件，IE都會(huì)自動(dòng)在后面創(chuàng)建一個(gè)1字節(jié)位的空白。
IE將跳過在節(jié)點(diǎn)之間產(chǎn)生的空格文檔節(jié)點(diǎn)（如：換行字符），而Mozilla不會(huì)這樣——FF會(huì)把諸如空格換行之類的排版元素視作節(jié)點(diǎn)讀取，因此，在ie中用nextSibling便可讀取到的下一個(gè)節(jié)點(diǎn)元素，在FF中就需要這樣寫：nextSibling.nextSibling了。
opera和safari對(duì)nextSibling的處理方式與FF一致

2：previousSibling屬性
該屬性與nextSibling屬性的作用正好相反。例如：someTagObject.nextSibling.previousSibling其實(shí)返回的是該標(biāo)簽元素本身，但前提必須是：該標(biāo)簽元素的后面必須有一個(gè)同級(jí)的元素，否則就返回null了。

3：通過nextSibling或者 previousSibling所獲得的HTML標(biāo)簽元素對(duì)象的屬性問題
一般先通過nextSibling.nodeName來獲知其標(biāo)簽名，或者通過nextSibling.nodeType來獲知其標(biāo)簽類型，然后，如果該nextSibling.nodeName = #text，則通過nextSibling.nodeValue來獲知其文本值；否則，可以通過nextSibling.innerHTML等其他常用標(biāo)簽元素屬性來獲取其屬性。

您可能感興趣的文章: