您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)JS怎么獲取子、父、兄節(jié)點(diǎn),小編覺得挺實(shí)用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。
1、能夠嵌入動態(tài)文本于HTML頁面。2、對瀏覽器事件做出響應(yīng)。3、讀寫HTML元素。4、在數(shù)據(jù)被提交到服務(wù)器之前驗(yàn)證數(shù)據(jù)。5、檢測訪客的瀏覽器信息。6、控制cookies,包括創(chuàng)建和修改等。7、基于Node.js技術(shù)進(jìn)行服務(wù)器端編程。
我們在實(shí)際的開發(fā)中,經(jīng)常要獲取頁面中某個html元素,動態(tài)更新元素的樣式、內(nèi)容屬性等。
我們已經(jīng)知道在JavaScript中提供下面的方法獲取子、父、兄節(jié)點(diǎn)的方法:
常規(guī)
通過父節(jié)點(diǎn)獲取子節(jié)點(diǎn):
parentObj.firstChild 獲取已知父節(jié)點(diǎn)的第一個子節(jié)點(diǎn)
parentObj.lastChild 獲取已知父節(jié)點(diǎn)的最后一個子節(jié)點(diǎn)
parentObj.childNodes 獲取已知父節(jié)點(diǎn)的子節(jié)點(diǎn)數(shù)組(這里我在IE 7中獲取的是所有直接的子節(jié)點(diǎn))
parentObj.children 獲取已知節(jié)點(diǎn)的直接子節(jié)點(diǎn)數(shù)組(在IE7中和childNodes效果一樣)
parentObj.getElementsByTagName(tagName) 返回已知子節(jié)點(diǎn)中類型為指定值的子節(jié)點(diǎn)數(shù)組
通過臨近節(jié)點(diǎn)獲取兄弟節(jié)點(diǎn):
neighbourNode.previousSibing 獲取已知節(jié)點(diǎn)的前一個兄弟節(jié)點(diǎn)
neighbourNode.nextSibing 獲取已知節(jié)點(diǎn)的下一個兄弟節(jié)點(diǎn)
通過子節(jié)點(diǎn)獲取父節(jié)點(diǎn):
1、childNode.parentNode 獲取已知節(jié)點(diǎn)的父節(jié)點(diǎn)
上面的方法基本都是可以遞歸是使用的,parentObj.firstChild.firstChild.firstChild...但是這樣的代碼有一種傻傻的趕腳。。
擴(kuò)展
在擴(kuò)展之前,我們需要知道一些關(guān)于節(jié)點(diǎn)基礎(chǔ)的知識:Dom節(jié)點(diǎn)中,每個節(jié)點(diǎn)都擁有不同的類型
W3C規(guī)范中常用的Dom節(jié)點(diǎn)的類型有以下幾種
節(jié)點(diǎn)類型 | 說明 | 值 |
元素節(jié)點(diǎn) | 每一個HTML標(biāo)簽都是一個元素節(jié)點(diǎn) | 1 |
屬性節(jié)點(diǎn) | 元素節(jié)點(diǎn)(HTML標(biāo)簽)的屬性,如id,class,name等 | 2 |
文本節(jié)點(diǎn) | 元素節(jié)點(diǎn)或?qū)傩怨?jié)點(diǎn)中的文本內(nèi)容 | 3 |
注釋節(jié)點(diǎn) | 便是文檔的注釋,形式如<!--comment Text--> | 8 |
文檔節(jié)點(diǎn) | 表示整個文檔(Dom樹的根節(jié)點(diǎn),即document) | 9 |
關(guān)于節(jié)點(diǎn)的名稱,不同類型的節(jié)點(diǎn)對應(yīng)不同的名稱
節(jié)點(diǎn)類型 | 節(jié)點(diǎn)名稱 |
元素節(jié)點(diǎn) | HTML的名稱(大寫) |
屬性節(jié)點(diǎn) | 屬性的名稱 |
文本節(jié)點(diǎn) | 它的值永遠(yuǎn)的都#text |
文檔節(jié)點(diǎn) | 它的值永遠(yuǎn)都是#document |
可以分別通過nodeType(節(jié)點(diǎn)類型),nodeName(節(jié)點(diǎn)名稱),以及nodeValue(節(jié)點(diǎn)值)分別返回節(jié)點(diǎn)的類型、節(jié)點(diǎn)名稱以及節(jié)點(diǎn)值(比如元素節(jié)點(diǎn)返回1,屬性節(jié)點(diǎn)返回2)
JS獲取兄弟節(jié)點(diǎn)的兩種方法
方法一:通過父元素的子元素先找到含自己在內(nèi)的“兄弟元素”,然后在剔除自己
function sibling(elem){ var a = []; var b = elem.parentNode.children; for (var i = 0 ; i < b.length ; i++){ if(b[i] !== elem) a.push(b[i]); } return a; }
方法二:jQuery中實(shí)現(xiàn)方法,先通過查找元素的第一個子元素,然后在不斷往下找下一個緊鄰元素,判斷并剔除自己。
siblings:function(elem) { return JQuery.sibling(elem.parentNode.firstNode,elem); } JQuery.sibling = function(n,elem){ var r = []; for (;n;n= n.nextSibling){ if(n.nodeType == 1 && (!elem || elem != elem)) r.push(n); } return r; }
在jQuery 1.2多的版本中都可以找到這段代碼,我看的jQuery1.2.3的版本,在1800行可以找到這段代碼:
把這個方法轉(zhuǎn)化為獨(dú)立可用的函數(shù):
fucntion sibling(elem){ var r = []; var n = elem.parentNode.firstChild; for(;n;n = n.nextSibling) { if(n.nodeType === 1 && n !== elem) { r.push(n); } } return r; }
很顯然通過這種方法查找特定節(jié)點(diǎn)的兄弟元素,可以很方便的避免的使用遞歸的冗余。
獲取所有元素子節(jié)點(diǎn)
在JavaScript中,可以通過children來獲取所有的子節(jié)點(diǎn)(只返回HTML中,甚至不返回子節(jié)點(diǎn)),幾乎得到了所有瀏覽器的支持,但是在Firefox有的版本中不支持。
注意:在IE中,children包含注釋節(jié)點(diǎn)
所以因?yàn)樘厥馇闆r的存在,有時候我們需要只獲取元素節(jié)點(diǎn),這樣我們就可以通過nodeType屬性來進(jìn)行篩選,用上面的知識:nodeType == 1的節(jié)點(diǎn)為元素節(jié)點(diǎn)。
下面,自定義一個函數(shù)來獲取所有的元素子節(jié)點(diǎn):
var getChildNodes = function(elem) { var childArr = elem.children || elem.childNodes, childArrTem = new Array(); for (var i = 0 ; i < childArr.length; i ++ ) { if (childArr[i].nodeType == 1){ childArrTem.push(childArr[i]); } } return childArrTem; }
獲取所有的父節(jié)點(diǎn)
同樣的,我們可以獲取當(dāng)前節(jié)點(diǎn)所有的父節(jié)點(diǎn):
function getParents (elem){ var parents = []; while(elem.parentNode){ parents.push(elem.parentNode) elem = elem.parentNode; } return parents; }
這樣我們可以接受一個dom節(jié)點(diǎn),最終會獲取到document對象,如果只要獲取到最上層是body,可以把while里的判斷改為: while(elem.parentNode && elem.parentNode.tagName == 'BODY'
依據(jù)JavaScript中的提供的獲取節(jié)點(diǎn)的方法和相關(guān)的知識,我們可以寫出很多封裝的方法,嘗試一下,你可以寫出多少種獲取節(jié)點(diǎn)的方法呢?
當(dāng)我們寫出了一些操作節(jié)點(diǎn)的封裝之后在去看jQuery中Dom操作節(jié)點(diǎn)方法的源碼會輕松很多呢。
關(guān)于“JS怎么獲取子、父、兄節(jié)點(diǎn)”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,使各位可以學(xué)到更多知識,如果覺得文章不錯,請把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。