JavaScriptNode節點遍歷
通過使用文檔對象模型DOM，JavaScript可以按照文檔操作方式實現對HTML文件進行訪問及相關讀寫操作。本文主要介紹通過使用DOM提供的Node對象屬性及方法實現文檔的遍歷。
Node對象基本屬性
Node對象是構成文檔的基礎，在W3C指定的DOM模型規則中，DOM中所有對象都是Node對象的延伸。整個Document文檔是由Node節點按照一定規則所構成。因此HTML文檔的遍歷，實質就是找到一個HTMLDoucment文件所有節點的過程。Node作為對象，其核心在於Node對象的方法與屬性。其主要屬性描述如下表所示：
Node主要屬性（一）
Node屬性（二）
以上給出了Node對象基本屬性，通過使用Node對象的屬性可以實現對DOM文檔結構中節點的訪問及讀寫操作。Node對象主要方法描述如下：
Node對象基本方法
文檔遍歷Demo設計
通過使用Node對象提供的方法與屬性，我們可以對一個Document對象進行文檔的遍歷，為測試文檔節點的遍歷與獲取。定義如下測試Demo：
測試Demo
測試用Demo樣式描述如上圖所示，主要元素包括H3標題標記，ul嵌套列表，form表單及元素等。頁面元素實現代碼描述如下：
文檔結構代碼描述
本例主要通過按鈕實現文檔元素的遍歷，Demo文檔中提供6個按鈕分別用於實現父節點、第一個子節點、最後一個子節點、前一個節點、後一個節點等的獲取。獲取節點之後將節點的Name名稱、Type類型與Value節點值在文本框中進行輸出與顯示。文本框輸出顯示主要藉助document對象與element對象的方法實現：
1、文本框值的輸出與實現主要藉助Element對象的setAttribute方法設置value值將其進行輸出。
2、藉助Document對象的getElementById返回指定的元素。
通過使用上述兩方法可以實現三個文本框Element的表示與獲取，定義nowElement用於表示當前訪問的節點。實現代碼如下：
onload事件獲取文本框並設置初始根節點
定義函數setInput用於實現將獲取的節點類型、名稱、值進行輸出顯示，該函數定義如下圖所示：
設置輸出Node屬性結果函數
該函數定義如上圖，在調用時通過傳遞參數，用於標識當前節點是否存在，如果存在則顯示節點名字、類型與值，不存在的話則顯示NULL。
按鈕操作的實現
針對本測試Demo按鈕通過頁面代碼可知，6個按鈕主要用於實現對當前節點6個基本屬性進行操作。如通過firstNode屬性獲取第一個子節點，lastNode屬性用於獲取最後一個子節點。因此可以定義一個函數，按照函數傳遞參數不同，獲取當前節點的不同屬性，並進行輸出顯示即可。本例定義函數getValue()用於實現對按鈕onClick事件進行處理。函數定義描述如下圖所示：
onlick響應函數
按鈕響應函數描述如上圖所示，可以通過該函數實現節點的訪問、遍歷及屬性的讀取操作。其中documentElement屬性用於返回HTML文檔的html標記，如果要獲取document文檔的根元素，則可以使用Node對象提供的getRootNode方法獲取。代碼如下：
獲取document文檔根元素
測試效果展示
測試效果展示
本頭條號長期關注編程資訊分享；編程課程、素材、代碼分享及編程培訓。如果您對以上方面有興趣或代碼錯誤、建議與意見，可在評論區回覆。更多程序設計相關教程及實例分享，期待大家關注與閱讀！相關文章鏈接如下：
