學習筆記 如何遍歷DOM？
你對遍歷DOM的概念是否了解，本文向大家描述一下，遍歷DOM就是用來描述訪問整個DOM尋找節點的行為，DOM接口為我們提供了大量的節點屬性以便我們在文檔中的所有節點自由訪問。
遍歷DOM
術語'遍歷DOM”就是用來描述訪問整個DOM尋找節點的行為。DOM接口為我們提供了大量的節點屬性以便我們在文檔中的所有節點自由訪問。這些節點屬性可以方便我們訪問關聯的/挨著的節點:
Node.childNodes:你可以使用它訪問某個元素的所有直屬子元素。它將返回一個類似數組的對象，你可以循環遍歷它。數組中的節點可以包含所有不同類型的節點，如文本節點和其它類型的元素節點。
◆Node.firstChild:這個屬性等同于訪問’childNodes’數組的首項(‘Element.childNodes[0]‘)。它是個捷徑。
◆Node.lastChild:這個屬性等同于訪問’childNodes’數組的末項(‘Element.childNodes[Element.childNodes.length-1]‘)。它也是個捷徑。
◆Node.parentNode:這個屬性可以讓你訪問當前節點的父節點，僅會有唯一一個父節點，如果想訪問’祖父’級節點，可以使用’Node.parentNode.parentNode’，以此類推。
◆Node.nextSibling:這個屬性可以讓你訪問DOM樹同級下的下一個節點。
◆Node.previousSibling:這個屬性可以讓你訪問DOM樹同級下的上一個節點。
所以就想你看到的一樣，遍歷DOM就是如此簡單，只要你熟練運用了他的那些節點屬性。
列表項只能在他們之間沒有空格的情況下檢索。因為在文檔中你能得到文本節點和元素節點，而’<ul>’和’<li>’之間的空格也會被當做是一個節點(文本節點)。同樣，無序列表嚴格意義上講并不是段落的下一個兄弟節點，因為在他倆之間有空格，也就是另一個節點。通常在這種情況下，你可以遍歷’childNodes’數組并測試它們的’nodeType’,'nodeType’值為1就是元素節點，2為屬性，3為文本節點。
這就是JavaScript基本運行方式，你可以使用本地DOM方法和屬性漂亮的訪問并提取文檔中的元素。現在你可以脫離那些繁瑣的框架而獨立進行基本的DOM操作了。
【編輯推薦】
- 深入學習JavaScript DOM遍歷方法
- 淺析Javascript Dom編程
- JavaScript獲取HTML DOM節點元素詳解
- JavaScript和DOM輕松實現數據訪問
- HTML DOM與XML DOM的區別與聯系探究
