在JavaScript里使用DOM时，HTML文档和XML文档虽然都遵循W3C的文档对象模型规范，但浏览器为HTML页面提供的接口远不止DOM Core，还叠加了专门针对网页元素的HTML DOM扩展。XML DOM则更纯粹地反映节点树结构，缺少那些为网页开发准备的快捷能力。这种差异会直接影响节点查找、属性读取、文本处理和错误处理逻辑。
一、节点模型与属性访问的差异
HTML文档中的每个元素通常对应一个专门的接口，例如<div>元素是HTMLDivElement，<input>元素是HTMLInputElement。这些接口继承自HTMLElement，并在DOM Core基础上增加了id、className、style、title等属性。以id为例，开发者可以直接写document.getElementById('app').id = 'main'来修改元素的id，也可以通过element.id读取。HTML元素还暴露了事件处理属性如onclick、表单属性如value，这些都不是DOM Core定义的标准成员。
XML文档中的节点则是通用Element对象，没有HTMLElement那一层扩展。想要获取某个节点的id或自定义属性，必须调用getAttribute('id')。如果直接写xmlElement.id，在大多数浏览器中会得到undefined，因为XML元素没有这个快捷属性。反过来，XML节点上也没有style、className这类页面样式相关成员。操作XML时应当始终使用getAttribute、setAttribute、removeAttribute这些通用方法。
这种差异的根源在于HTML DOM是面向网页渲染和交互设计的，它把常用属性提升为对象成员，方便脚本快速操作；XML DOM则保持对任意标记语言的通用性，节点不预设任何业务属性，所有属性都统一存放在属性列表中。因此从XML切换到HTML时，代码可以更简洁；从HTML切换到XML时，则需要去掉那些依赖元素接口的写法，否则会出现undefined、null或静默失效。
二、节点查找与文本节点处理
HTML DOM提供了一些针对网页优化的查找入口。最典型的是document.getElementById，它可以直接返回具有指定id的元素。HTML解析器会把文档中的id属性注册为可查找标识，因此这个方法速度很快。HTML还允许通过document.forms、document.images、document.links等集合访问特定类型的元素，这些集合并不是从XML文档自动获得的。
XML DOM没有内建的按id快速查找能力，除非文档通过DTD或xml:id明确声明了某个属性是ID类型。现代浏览器对xml:id有支持，但普通的自定义id属性不会被识别为ID。此时需要依赖getElementsByTagName按标签名查找，再遍历结果并比对属性值，例如先拿到所有item节点，再逐个检查getAttribute('id')是否等于目标值。在支持XPath的浏览器环境中，也可以用document.evaluate对XML文档执行表达式查询，但这不是所有场景都可用。
文本节点处理是另一个容易踩坑的地方。HTML解析器会把源代码中的换行和缩进当作空白，但某些元素内部的空白可能被压缩或忽略；而XML解析器会原样保留所有字符，包括标签之间的换行、空格、缩进。比如下面这段XML：
<root> <item>A</item> </root>
在XML DOM中，root元素的childNodes不止包含item元素，还可能包含前后的空白文本节点。遍历子节点时如果不判断nodeType，就会把这些#text节点当成有效节点处理。HTML中虽然也存在文本节点，但浏览器对空白的处理更宽松，很多空白文本节点不会进入DOM树，因此开发者对childNodes的敏感度通常更低。
三、解析流程与错误处理
HTML解析器是出了名的宽容。即使标签没有闭合、属性值没有加引号、缺少html或body元素，浏览器也会尽力修正并生成一棵可用的DOM树。比如写<ul><li>第一项<li>第二项，HTML解析器会自动补上闭合标签，最终得到两个li节点。这种容错机制适合互联网上大量不规范的页面，但对严格的数据交换场景来说，容易掩盖格式问题。
XML解析则完全不同。使用DOMParser解析XML字符串时，只要出现一处格式错误，例如标签未闭合、属性值缺少引号、实体未定义，解析器就会生成一个parsererror文档，而不是部分可用的节点树。检查方式通常是查找parsererror标签，或者查看解析结果中是否包含错误信息。下面是一个解析XML的示例：
const parser = new DOMParser();
const xmlText = '<root><item id="1">A</item></root>';
const xmlDoc = parser.parseFromString(xmlText, 'application/xml');
const errorNode = xmlDoc.getElementsByTagName('parsererror')[0];
if (errorNode) {
console.error('XML解析失败:', errorNode.textContent);
} else {
const firstItem = xmlDoc.getElementsByTagName('item')[0];
console.log(firstItem.getAttribute('id'));
}
HTML文档通常不需要手动解析，因为页面加载后document本身就是一棵已经解析好的树。如果要解析片段，可以使用DOMParser的text/html类型，或者使用innerHTML赋值。不过innerHTML走的是HTML解析器，行为与XML解析器不同。XML解析一旦失败就抛出异常或返回错误节点，HTML解析失败几乎不会发生，它会想尽办法修复。
序列化也有区别。对HTML元素调用outerHTML得到的是浏览器规范化后的HTML，属性顺序可能变化，空标签可能被补齐。对XML文档使用XMLSerializer序列化时，会保留XML的声明、命名空间和空标签写法，输出更稳定可控。如果数据需要被另一个系统按XML格式消费，应当使用XML专用的序列化方式。
四、大小写、命名空间与选择建议
HTML标签名和属性名不区分大小写。在HTML文档中，document.getElementsByTagName('DIV')和document.getElementsByTagName('div')返回相同结果，因为解析器会将标签名统一为小写。XML则严格区分大小写，<Item>和<item>是两个完全不同的元素。用getElementsByTagName('item')不会匹配到<Item>节点。这个差别在处理SVG或MathML嵌入HTML时也需要注意，因为它们遵循XML命名规则。
命名空间支持是XML DOM的重要特性。XML文档常常带有命名空间声明，例如xmlns="http://ippipp.com/ns"。在JavaScript中应该使用getElementsByTagNameNS和createElementNS来查找和创建带命名空间的节点。HTML普通文档一般不用命名空间，但内联的SVG、MathML片段会使用自己的命名空间。如果处理配置、RSS、SOAP、Office文档等XML数据，命名空间方法是必须掌握的。
选择使用哪套DOM取决于数据来源。如果操作的是浏览器中的网页结构，使用HTML DOM的快捷属性、事件绑定和样式操作会更高效。如果处理的是服务端返回的XML、配置文件、数据交换报文，则要切换到XML DOM思路：使用DOMParser解析、通过getAttribute读取属性、注意空白文本节点、区分大小写，并做好解析错误处理。很多问题并不是DOM本身出错，而是拿HTML DOM的习惯去操作XML树，导致属性读取失败或节点匹配不到。
在同一个页面中，HTML DOM和XML DOM也可以同时存在。例如用JavaScript读取一段XML字符串生成XML文档后，就可以在XML节点上使用DOM Core方法，同时继续操作页面上的HTML元素。两者共享相同的节点类型定义和部分API，但在属性扩展、解析容错、大小写规则、空白处理和命名空间方面存在本质差异。理解这些边界，能让跨格式数据处理少走弯路。
JavaScript XML DOMHTML DOMDOM操作修改时间：2026-09-22 06:13:55