DOM 樹狀結構檢視器
免費線上 DOM 樹狀結構檢視器。貼上 HTML，看瀏覽器怎麼把它解析成 element、text、comment 節點，連最容易忽略的空白文字節點也一併標出。
DOM 樹狀結構檢視器
免費線上 DOM 樹狀結構檢視器。貼上 HTML，看瀏覽器怎麼把它解析成 element、text、comment 節點，連最容易忽略的空白文字節點也一併標出。
關於 DOM 樹
DOM 是什麼
瀏覽器載入頁面時，會把你的 HTML 解析成一棵節點樹，叫做 DOM（文件物件模型）。每個標籤變成 element 節點，標籤之間的文字變成 text 節點，註解變成 comment 節點。JavaScript 之後就是靠走訪與修改這棵樹來讀寫頁面，而不是動原始的 HTML 字串。
字串與樹的差別
你寫的 HTML 只是一串字元。瀏覽器把它變成有結構的樹，過程中還會產生一些你沒刻意打出來的節點：標籤之間的換行與縮排會變成空白文字節點。看見它們，就能解釋為什麼 childNodes 常常比你想的多。
常見問題
關於這個主題的常見疑問與實用解答。
childNodes 和 children 差在哪？
children 只列 element 節點；childNodes 還包含 text 節點（含空白）與 comment 節點，所以 childNodes.length 常常比較大。本工具把每種節點都畫出來，差異一目了然。
為什麼會有一堆空白節點？
你為了讓 HTML 好讀而加的換行與縮排，在 DOM 裡都變成 text 節點。它們是真實存在的節點，可能影響排版與 DOM 走訪。壓縮過的 HTML 就會少很多。
我的 HTML 會被傳送到伺服器嗎？
不會。解析完全在你的瀏覽器中以內建的 DOMParser 執行，你貼上的任何內容都不會離開你的裝置。