HTML树结构解析

在线HTML DOM树结构解析工具，输入URL或粘贴HTML源代码，自动生成可视化DOM节点树结构，每个节点显示标准XPath路径、属性、innerHTML和文本内容，支持展开折叠搜索和代码视图切换，帮助前端开发者调试页面结构、定位元素、编写XPath选择器。

HTML输入

从URL抓取

HTML源代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>示例页面</title>
</head>
<body>
    <div id="app" class="container">
        <header class="header">
            <h1>欢迎使用HTML树结构解析工具</h1>
            <nav class="nav">
                <ul>
                    <li><a href="/">首页</a></li>
                    <li><a href="/docs" target="_blank">文档</a></li>
                </ul>
            </nav>
        </header>
        <main>
            <section class="content">
                <article data-id="1">
                    <h2>功能介绍</h2>
                    <p>这是一个<strong>强大</strong>的DOM解析工具。</p>
                </article>
            </section>
            <aside class="sidebar">
                <div class="widget">
                    <h3>热门标签</h3>
                    <span class="tag">HTML</span>
                    <span class="tag">XPath</span>
                </div>
            </aside>
        </main>
        <footer id="footer">
            <p>© 2024 NetProOATool</p>
        </footer>
    </div>
</body>
</html>

DOM树结构 0 节点

功能特性

URL抓取/源码解析

支持直接输入URL自动抓取网页HTML，或手动粘贴HTML源代码进行解析，两种方式灵活切换。

DOM树可视化

将HTML文档解析为直观的层级树结构，支持节点展开折叠、搜索过滤，快速浏览整体页面结构。

标准XPath生成

为每个DOM节点自动生成标准XPath路径，格式如/html[1]/body[1]/div[2]，可直接用于爬虫和自动化测试。

双视图切换

支持树形视图（Tree）和代码视图（Code）两种展示模式，树视图方便浏览层级，代码视图查看完整JSON结构。

属性文本展示

每个节点完整展示节点名称、类型、全部属性（id/class/data-*等）、innerHTML代码和innerText文本内容。

深度展开

最大支持50层深度递归解析，自动跳过空白文本节点，复杂嵌套页面也能完整呈现结构全貌。

使用说明

通过URL抓取解析

在「从URL抓取」输入框中填入完整的目标网页URL，如https://example.com。
点击「抓取」按钮，工具将模拟浏览器User-Agent请求目标页面并获取HTML源代码。
抓取成功后HTML会自动填充到下方文本框，点击「解析」按钮即可生成DOM树结构。
注意：部分网站可能有反爬机制导致抓取失败，此时可手动复制HTML源码粘贴解析。

通过HTML源码解析

直接在「HTML源代码」文本框中粘贴或编写HTML内容。
点击「解析」按钮，工具使用HtmlAgilityPack解析器构建DOM树。
右侧结果区将以可交互树形视图展示所有节点，点击节点箭头可展开/折叠子节点。
点击右上角「代码」按钮可切换到JSON代码视图，查看完整的结构化数据。

节点字段说明

name：节点标签名（如div、span、#text等）。
nodeType：节点类型（Element/Text/Comment/Document）。
xpath：标准XPath绝对路径，可直接用于Selenium/Scrapy等工具。
attributes：节点的所有属性键值对（id、class、href、src等）。
outerHtml：节点完整HTML代码（包含自身标签）。
innerText：节点去除标签后的纯文本内容。
children：子节点数组，递归嵌套结构。

常见问题

什么是XPath？它有什么用途？

XPath（XML Path Language）是一种用于在XML/HTML文档中定位节点的查询语言。它使用路径表达式（如/html/body/div[1]）来选取节点。XPath广泛应用于：网页爬虫（Scrapy、BeautifulSoup支持XPath选择器）、UI自动化测试（Selenium、Appium通过XPath定位页面元素）、数据抽取（从XML/HTML中提取指定字段）、XSLT转换等场景。相比CSS选择器，XPath支持更复杂的条件查询（如按文本内容、轴关系选择）。

生成的XPath为什么带索引下标？

标准XPath中，如果同名兄弟节点存在多个，需要用索引（从1开始）区分。例如同一个父节点下有3个div，则第二个div的路径为div[2]。如果某个标签在同级中唯一，则省略索引。这种"位置索引式XPath"是绝对可靠的定位方式，即使页面结构小范围变化也能正确定位，常用于自动化测试脚本。

为什么有些空白文本节点没有显示？

HTML源码中标签之间的换行、缩进等会被解析为空白Text节点（仅包含空格、换行符、制表符），这些节点对页面结构分析没有实际价值，本工具会自动跳过它们以简化树结构。非空白的文本节点（如标签内实际文字内容）仍会完整保留，节点名称显示为#text。

最大支持多大的HTML文件？解析深度有限制吗？

本工具基于服务器端HtmlAgilityPack解析，对HTML大小没有严格限制（建议10MB以内）。DOM树递归解析的最大深度限制为50层，超过该深度的节点会被截断，避免极端嵌套导致的性能问题。绝大多数实际网页的DOM层级在20层以内，该限制完全够用。

URL抓取失败的常见原因有哪些？

抓取失败可能由以下原因导致：①URL格式错误：需包含http://或https://协议头；②网络/防火墙限制：目标服务器屏蔽了本工具服务器IP；③反爬机制：目标站要求登录、验证码、Cookie或检测到非浏览器请求；④HTTPS证书问题：目标网站证书无效；⑤超时：目标网站响应超过20秒。失败时建议手动在浏览器打开页面，复制HTML源码后粘贴解析。