你對(duì)遍歷DOM的概念是否了解，本文向大家描述一下，遍歷DOM就是用來描述訪問整個(gè)DOM尋找節(jié)點(diǎn)的行為，DOM接口為我們提供了大量的節(jié)點(diǎn)屬性以便我們?cè)谖臋n中的所有節(jié)點(diǎn)自由訪問。

遍歷DOM

術(shù)語'遍歷DOM”就是用來描述訪問整個(gè)DOM尋找節(jié)點(diǎn)的行為。DOM接口為我們提供了大量的節(jié)點(diǎn)屬性以便我們?cè)谖臋n中的所有節(jié)點(diǎn)自由訪問。這些節(jié)點(diǎn)屬性可以方便我們?cè)L問關(guān)聯(lián)的/挨著的節(jié)點(diǎn):

Node.childNodes:你可以使用它訪問某個(gè)元素的所有直屬子元素。它將返回一個(gè)類似數(shù)組的對(duì)象，你可以循環(huán)遍歷它。數(shù)組中的節(jié)點(diǎn)可以包含所有不同類型的節(jié)點(diǎn)，如文本節(jié)點(diǎn)和其它類型的元素節(jié)點(diǎn)。

◆Node.firstChild:這個(gè)屬性等同于訪問’childNodes’數(shù)組的首項(xiàng)(‘Element.childNodes[0]‘)。它是個(gè)捷徑。

◆Node.lastChild:這個(gè)屬性等同于訪問’childNodes’數(shù)組的末項(xiàng)(‘Element.childNodes[Element.childNodes.length-1]‘)。它也是個(gè)捷徑。

◆Node.parentNode:這個(gè)屬性可以讓你訪問當(dāng)前節(jié)點(diǎn)的父節(jié)點(diǎn)，僅會(huì)有唯一一個(gè)父節(jié)點(diǎn)，如果想訪問’祖父’級(jí)節(jié)點(diǎn)，可以使用’Node.parentNode.parentNode’，以此類推。

◆Node.nextSibling:這個(gè)屬性可以讓你訪問DOM樹同級(jí)下的下一個(gè)節(jié)點(diǎn)。

◆Node.previousSibling:這個(gè)屬性可以讓你訪問DOM樹同級(jí)下的上一個(gè)節(jié)點(diǎn)。

所以就想你看到的一樣，遍歷DOM就是如此簡(jiǎn)單，只要你熟練運(yùn)用了他的那些節(jié)點(diǎn)屬性。

列表項(xiàng)只能在他們之間沒有空格的情況下檢索。因?yàn)樵谖臋n中你能得到文本節(jié)點(diǎn)和元素節(jié)點(diǎn)，而’<ul>’和’<li>’之間的空格也會(huì)被當(dāng)做是一個(gè)節(jié)點(diǎn)(文本節(jié)點(diǎn))。同樣，無序列表嚴(yán)格意義上講并不是段落的下一個(gè)兄弟節(jié)點(diǎn)，因?yàn)樵谒麄z之間有空格，也就是另一個(gè)節(jié)點(diǎn)。通常在這種情況下，你可以遍歷’childNodes’數(shù)組并測(cè)試它們的’nodeType’,'nodeType’值為1就是元素節(jié)點(diǎn)，2為屬性，3為文本節(jié)點(diǎn)。

這就是JavaScript基本運(yùn)行方式，你可以使用本地DOM方法和屬性漂亮的訪問并提取文檔中的元素。現(xiàn)在你可以脫離那些繁瑣的框架而獨(dú)立進(jìn)行基本的DOM操作了。
 

【編輯推薦】

1. 深入學(xué)習(xí)JavaScript DOM遍歷方法
2. 淺析Javascript Dom編程
3. JavaScript獲取HTML DOM節(jié)點(diǎn)元素詳解
4. JavaScript和DOM輕松實(shí)現(xiàn)數(shù)據(jù)訪問
5. HTML DOM與XML DOM的區(qū)別與聯(lián)系探究