XML DOM Parse Error 对象

XML DOM Parse Error 对象（XML 解析错误对象）

在浏览器中，当你用 DOMParser 解析 有语法错误的 XML 时，不会抛出 JS 异常，而是返回一个特殊的 错误文档（error document）。
这个文档的根节点是 <parsererror>，里面包含了详细的解析错误信息。

这套机制是 所有现代浏览器（Chrome/Firefox/Safari/Edge）统一的规范，也是前端处理 XML 出错时最可靠的方式。

1. 错误文档的固定结构（2025 年最新标准）

<?xml version="1.0" encoding="UTF-8"?>
<parsererror xmlns="http://www.mozilla.org/newlayout/xml/parsererror.xml">
  <h1>XML Parsing Error</h1>
  <h2>Location: ...<br/>Line Number 5, Column 12:</h2>
  <sourcetext>
    &lt;book&gt;
      &lt;title&gt;XML 入门&lt;/title&gt;
      &lt;price&gt;68&lt;/price&gt;
      &lt;author&gt;张三&lt;/author
    -----------^
  </sourcetext>
  <p>Expected '&lt;/author&gt;' to close '&lt;author&gt;' element.</p>
</parsererror>

不同浏览器样式略有差异，但核心节点名称和命名空间完全一致：

节点	内容含义	所有浏览器都有？
<parsererror>	根节点，命名空间固定	Yes
<h1> 或 <title>	“XML Parsing Error”	Yes
<h2>	错误位置（文件路径 + 行号 + 列号）	Yes
<sourcetext>	出错代码片段 + 箭头指向错误位置	Yes
第二个文本节点或 <p>、<div>	具体的错误描述（如 “Expected …”）	Yes

2. 正确判断解析是否成功的代码（生产必备）

function parseXML(xmlString) {
    const parser = new DOMParser();
    const doc = parser.parseFromString(xmlString, "text/xml");

    // 关键判断：是否存在 parsererror
    const parsererror = doc.querySelector("parsererror");
    if (parsererror) {
        // 解析失败
        const errorInfo = extractParseError(doc);
        throw new Error(`XML 解析失败：${errorInfo.message}（第 ${errorInfo.line} 行，第 ${errorInfo.column} 列）`);
    }

    // 解析成功
    return doc;
}

3. 完整通用的错误信息提取函数（兼容所有浏览器）

function extractParseError(errorDoc) {
    const ns = "http://www.mozilla.org/newlayout/xml/parsererror.xml";
    const errorNode = errorDoc.querySelector("parsererror") ||
                      errorDoc.documentElement; // 有些浏览器直接就是 <parsererror>

    // 1. 错误描述（最准确）
    let message = errorNode.querySelector("p, div:last-child, :last-child")?.textContent?.trim() ||
                  errorNode.textContent.trim();

    // 2. 位置信息（行号、列号）
    const locationText = errorNode.querySelector("h2, h2 + *")?.textContent || "";
    const lineMatch = locationText.match(/Line Number\s+(\d+),?\s+Column\s+(\d+)/i) ||
                      locationText.match(/行\s+(\d+).*?列\s+(\d+)/);

    // 3. 出错代码片段（带 ^ 箭头）
    const sourcetext = errorNode.querySelector("sourcetext")?.textContent || "";

    return {
        message: message || "未知的 XML 解析错误",
        line: lineMatch ? parseInt(lineMatch[1]) : null,
        column: lineMatch ? parseInt(lineMatch[2]) : null,
        sourcetext: sourcetext.trim(),
        fullErrorHTML: new XMLSerializer().serializeToString(errorDoc)
    };
}

4. 实战完整示例

const badXML = `
<library>
  <book id="1">
    <title>XML 入门</title>
    <price>68.00</price>
    <author>张三</author>
  </book>
  <book>   <!-- 故意缺 </book> -->
</library>`;

try {
    const doc = parseXML(badXML);
    console.log("解析成功", doc);
} catch (err) {
    console.error(err.message);
    // 输出类似：XML 解析失败：Expected '</book>' to close '<book>' element.（第 8 行，第 8 列）
}

5. 常见错误类型与典型提示（面试常考）

错误类型	典型错误提示（英文）	中文常见提示
标签未闭合	Expected ” to close ” element	应有 “” 来结束元素
标签嵌套错误	Element ‘xxx’ was not closed	元素未正确关闭
非法字符（< 在文本中）	The entity name must immediately follow the ‘&’	实体名称必须紧跟 “&”
属性值未用引号	Attribute value must be quoted	属性值必须加引号
声明位置错误	XML declaration not at start of document	XML 声明必须在文档最开头
多个根元素	Extra content at the end of the document	文档末尾有多余内容

6. 终极总结（背下来就无敌）

项目	关键点
解析失败时返回什么？	正常的 Document 对象，但 documentElement 是 <parsererror>
如何判断解析失败？	doc.querySelector("parsererror") !== null
如何获取行号列号？	读取 <h2> 或 <sourcetext> 中的数字 + 正则提取
是否抛异常？	不抛异常，必须手动检测
是否所有浏览器都支持？	Chrome、Firefox、Safari、Edge 全支持，格式统一
生产环境一定要检测吗？	必须！ 否则你会拿到一个“假 Document”，后面全部错

一行代码判断 XML 是否合法（最优雅写法）：

const isValidXML = (str) => !new DOMParser()
    .parseFromString(str, "text/xml")
    .querySelector("parsererror");

记住：XML 解析永不抛错，只返回 <parsererror>，手动检查是前端工程师的基本功！