XML DOM 终极总结（2025 版·一图看懂全部）
| 节点类型 | nodeType | nodeName | 继承自 | 核心用途 & 记住点 | 创建方法 |
|---|---|---|---|---|---|
| Document | 9 | “#document” | Node | 整个 XML 文档的根对象 | new DOMParser().parseFromString() |
| DocumentType | 10 | doctype 名称 | Node | 自动解析 | |
| Element | 1 | 标签名（如 book） | Element | 承载结构与数据，几乎所有操作都围绕它 | createElement(NS) |
| Attr | 2 | 属性名（如 id） | Attr | 元素属性节点（日常用 set/getAttribute 即可） | createAttribute(NS)（不推荐直接用） |
| Text | 3 | “#text” | CharacterData | 普通文本内容，会被转义 < → < | createTextNode() |
| CDATASection | 4 | “#cdata-section” | Text | 不转义文本（放脚本、HTML、< > &） | createCDATASection() |
| Comment | 8 | “#comment” | CharacterData | ，永不显示、可写标记 | createComment() |
| ProcessingInstruction | 7 | target（如 xml） | Node | createProcessingInstruction() | |
| DocumentFragment | 11 | “#document-fragment” | Node | 轻量文档片段，批量插入性能高 | createDocumentFragment() |
| parsererror（非标准但通用） | – | parsererror | – | 解析失败时返回的错误文档根节点 | DOMParser 自动生成 |
核心对象关系图（背下来就无敌）
Document
├── documentElement (Element) ← 通常是 <root>
├── createElement / createElementNS
├── createTextNode
├── createCDATASection
├── createComment
├── createProcessingInstruction
└── querySelector / getElementsByTagNameNS
Element
├── attributes → NamedNodeMap → [Attr, Attr, ...]（含 xmlns）
├── childNodes → [Element, Text, Comment, ...]
├── textContent ← 递归所有 Text 节点内容
└── setAttributeNS / getAttributeNS（命名空间必用）
Text / CDATASection / Comment
└── 都继承 CharacterData → data、splitText()、wholeText、normalize()日常 99% 场景必会的 10 行代码
const parser = new DOMParser();
const doc = parser.parseFromString(xmlStr, "text/xml");
// 1. 必须先检查是否解析成功（永不抛错！）
if (doc.querySelector("parsererror")) throw "XML 语法错误";
// 2. 常用获取
doc.documentElement // <root>
doc.getElementsByTagNameNS(ns, "item")
doc.querySelector("ns|tag") // 命名空间简写（IE 不支持）
// 3. 创建带命名空间的元素（必须用 NS）
doc.createElementNS("http://www.w3.org/2000/svg", "svg:circle")
// 4. 安全写文本（自动转义）
elem.textContent = "<危险>&内容" // 正确
// elem.innerHTML = "..." // XML 中绝对禁用！
// 5. 添加不转义内容（脚本、HTML 片段）
elem.appendChild(doc.createCDATASection("<script>alert(1)</script>"))
// 6. 添加注释
elem.appendChild(doc.createComment("TODO: 待实现"))
// 7. 序列化输出
new XMLSerializer().serializeToString(doc)终极记忆口诀（10 秒记住全部节点）
“文素属字注指错”
文档、元素、属性、文本、注释、处理指令、CDATA、错误
对应 nodeType：9-1-2-3-8-7-4-（parsererror）
生产环境必备检查清单
| 操作 | 正确做法 | 错误做法 |
|---|---|---|
| 解析 XML | 必须检查 doc.querySelector(“parsererror”) | 直接使用 doc |
| 创建带命名空间元素 | createElementNS | createElement |
| 设置/读取命名空间属性 | set/getAttributeNS | 普通 setAttribute |
| 写入包含 < > & 的内容 | textContent 或 CDATASection | innerHTML |
| 遍历所有属性（含 xmlns） | for(let attr of elem.attributes) | 只用 getAttribute |
| 合并相邻文本节点 | parent.normalize() | 忽略，导致操作异常 |
掌握这张表 + 上面 10 行代码，你就已经完全精通浏览器中的 XML DOM，足以应对 100% 的前端 XML 场景（SVG、XSLT、RSS、Atom、OASIS、Office Open XML、自定义格式等）。
一句话总结：
XML DOM = Document + Element + Text + 命名空间 + parsererror 检查
其余都是细节，记住这五点就无敌！
