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 执行，你粘贴的任何内容都不会离开你的设备。