操作Dom中的子元素與兄弟元素的代碼

2019-11-21 00:10:49

字體：大中小

來源：轉載

供稿：網友

首先，我們必須正確的理解什么是子元素．比如我們在網頁里寫了一個span標簽．并且在span里寫入文本內容：＂歡迎光臨武林網＂，那么這個文本內容就是span的子元素．相同，如果span被某個div所包含．那么span就是該div的子元素．看下面這段代碼：

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

從上面的代碼可以看出來＂歡迎光臨武林網＂與span都被包含在一個div中．但是你無法在div中直接引用＂歡迎光臨武林網＂這段文字內容．我想要告訴你的就是：在獲取子元素時，不可以跨級獲?。?子元素只能被直接父元素所引用！同理，這個div也算是body標簽中的一個子元素．但你無法直接在body中獲得span標簽．你必須在body中獲得div然后再取span．看下面的實例演示：

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

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

獲取當前元素中第一個子元素的方法是：firstChild
獲取當前元素中最后一個子元素的方法是：lastChild
獲取當前元素中所有的子元素的方法是：childNodes
提示：在處理子元素時．會遇到空格問題．因為我上面的代碼body與div之間．div與span之間都沒有換行符，所以這個問題可以避免．但你不能在輸寫代碼時總不換行吧．在FF等瀏覽器中行與行之間會形成一個空格元素．他們會把這些空格也看作一個有效的元素來處理，請參閱：Dom技巧之空格過濾
理解完子元素．我們再講一下什么是兄弟元素．從字面上你應該能理解的差不多．所謂的兄弟的元素，其實就是擁有同一個父元素的元素之間互稱為兄弟元素．看下面代碼：

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

上面的代碼演示了：在一個div標簽中包含了div,span,a這些元素，那么這些被包含的div,span,a就可以相互稱之為兄弟元素，因為他們都被同一個父元素所包含！
下面我們再來演示一下如何獲取兄弟之間的元素：

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

在上面的代碼中我們為span元素設置了一個id屬性．也許你還不知道，如果想快速獲取某個元素，你應該為元素設置一個id屬性．然后根據id屬性的值使用getElementById方法來獲取．
在獲取了span元素以后我們分別使用了以下的Dom方法，來獲取span的上一個兄弟元素div,和下一個兄弟元素a

在Dom中使用previousSibling方法可以獲取當前元素的上一個兄弟元素
在Dom中使用nextSibling方法可以獲取當前元素的下一個兄弟元素
針對FF瀏覽中在獲取兄弟元素時也會出現空格問題．請參閱：Dom技巧之空格過濾通過本文的講．你應該能正確的認識或操作子元素與兄弟元素．如需轉載，請務必保留以下信息：
本文版權：Web圈　首發地址：http://www.web666.net/dom/dom_6.html

上一篇：jquery ui resizable bug解決方法

下一篇：HTML Dom與Css控制方法