首先，我們必須正確的理解什么是子元素．比如我們?cè)诰W(wǎng)頁(yè)里寫(xiě)了一個(gè)span標(biāo)簽． 并且在span里寫(xiě)入文本內(nèi)容：＂歡迎光臨腳本之家＂，那么這個(gè)文本內(nèi)容就是span的子元素．相同，如果span被某個(gè)div所包含．那么span就是該div的子元素．看下面這段代碼：

從上面的代碼可以看出來(lái)＂歡迎光臨腳本之家＂與span都被包含在一個(gè)div中．但是你無(wú)法在div中直接引用＂歡迎光臨腳本之家＂這段文字內(nèi)容．我想要告訴你的就是：在獲取子元素時(shí)，不可以跨級(jí)獲?。?子元素只能被直接父元素所引用！同理，這個(gè)div也算是body標(biāo)簽中的一個(gè)子元素．但你無(wú)法直接在body中獲得span標(biāo)簽．你必須在body中獲得div然后再取span．看下面的實(shí)例演示：

我列舉一下Dom中獲取子元的幾個(gè)方法：

獲取當(dāng)前元素中第一個(gè)子元素的方法是：firstChild
獲取當(dāng)前元素中最后一個(gè)子元素的方法是：lastChild
獲取當(dāng)前元素中所有的子元素的方法是：childNodes
提示：在處理子元素時(shí)．會(huì)遇到空格問(wèn)題．因?yàn)槲疑厦娴拇abody與div之間．div與span之間都沒(méi)有換行符，所以這個(gè)問(wèn)題可以避免．但你不能在輸寫(xiě)代碼時(shí)總不換行吧． 在FF等瀏覽器中行與行之間會(huì)形成一個(gè)空格元素．他們會(huì)把這些空格也看作一個(gè)有效的元素來(lái)處理，請(qǐng)參閱：Dom技巧之空格過(guò)濾
理解完子元素．我們?cè)僦v一下什么是兄弟元素．從字面上你應(yīng)該能理解的差不多．所謂的兄弟的元素，其實(shí)就是擁有同一個(gè)父元素的元素之間互稱(chēng)為兄弟元素．看下面代碼：

上面的代碼演示了：在一個(gè)div標(biāo)簽中包含了div,span,a這些元素，那么這些被包含的div,span,a就可以相互稱(chēng)之為兄弟元素，因?yàn)樗麄兌急煌粋€(gè)父元素所包含！
下面我們?cè)賮?lái)演示一下如何獲取兄弟之間的元素：

在上面的代碼中我們?yōu)閟pan元素設(shè)置了一個(gè)id屬性．也許你還不知道，如果想快速獲取某個(gè)元素，你應(yīng)該為元素設(shè)置一個(gè)id屬性．然后根據(jù)id屬性的值使用getElementById方法來(lái)獲取．
在獲取了span元素以后我們分別使用了以下的Dom方法，來(lái)獲取span的上一個(gè)兄弟元素div,和下一個(gè)兄弟元素a

在Dom中使用previousSibling方法可以獲取當(dāng)前元素的上一個(gè)兄弟元素
在Dom中使用nextSibling方法可以獲取當(dāng)前元素的下一個(gè)兄弟元素
針對(duì)FF瀏覽中在獲取兄弟元素時(shí)也會(huì)出現(xiàn)空格問(wèn)題．請(qǐng)參閱：Dom技巧之空格過(guò)濾 通過(guò)本文的講．你應(yīng)該能正確的認(rèn)識(shí)或操作子元素與兄弟元素．如需轉(zhuǎn)載，請(qǐng)務(wù)必保留以下信息：
本文版權(quán)：Web圈　首發(fā)地址：http://www.web666.net/dom/dom_6.html

最新評(píng)論