XML需通过XMLHttpRequest或fetch加载并解析，注意同源、MIME类型、BOM及编码问题；提取文本必须用textContent而非innerText；推荐DOMParser+querySelecto避免getElementsByTagName全局查找陷阱。
XMLHttpRequest 加载 XML 后用 getElementsByTagName 提取文本内容
HTML5 本身不提供直接读取本地 XML 文件的 API，必须通过网络请求（如 XMLHttpRequest 或 fetch）加载，再解析 DOM。浏览器原生支持 XML 解析，但注意：XML 必须同源（或服务端配 CORS），且不能用 file:// 协议直接打开（会触发 CORS 策略拒绝）。
常见错误现象：responseXML 为 null，或节点 textContent 返回 undefined —— 多因 MIME 类型不对（服务器返回 text/plain 而非 application/xml）或 XML 格式非法（如 BOM、编码声明不匹配）。
- 确保服务端响应头含
Content-Type: application/xml; charset=utf-8 - XML 文件首行避免 UTF-8 BOM（可用编辑器另存为“UTF-8 无 BOM”）
- 用
responseXML.documentElement确认根节点存在，再查子节点
const xhr = new XMLHttpRequest();
xhr.open('GET', 'data.xml', true);
xhr.onload = function() {
if (xhr.status === 200 && xhr.responseXML) {
const root = xhr.responseXML.documentElement;
const titleNodes = root.getElementsByTagName('title');
if (titleNodes.length > 0) {
console.log(titleNodes[0].textContent.trim()); // 推荐用 textContent，不是 innerText
}
}
};
xhr.send();
textContent vs innerText 在 XML 解析中的区别
XML 是纯结构化数据，没有样式、换行折叠、隐藏元素等概念，innerText 是 HTML DOM 特有属性，对 XML 文档节点始终返回空字符串或 undefined。必须用 textContent —— 它直接返回节点及其后代所有文本节点的拼接内容，不含标签，保留空白符（可手动 trim()）。
-
textContent可用于任意 Node（Element、Text、Document），兼容性好（IE9+） -
innerText仅适用于 HTML 元素，且在 XML 文档中不可靠（Chrome 返回空，Firefox 报错） - 若需忽略换行/缩进，统一加
.trim()；若需保留原始格式（如类字段），则跳过 trim
用 fetch + DOMParser 实现更现代的解析方式
当 XML 来源是字符串（比如后端返回的 XML 片段、AJAX 响应体为 text 类型），或你想绕过 XMLHttpRequest 的 MIME 限制时，DOMParser 是更可控的选择。它不依赖 HTTP 响应头，只要传入字符串和正确类型即可。
立即学习“前端免费学习笔记（深入）”；
DOMParser.parseFromString(xmlStr, 'application/xml')返回 Document 对象- 务必检查
parsererror元素是否存在：若 XML 有语法错误，浏览器会在解析结果中插入一个 - 推荐先判断
doc.documentElement.nodeName === 'parsererror'，再继续提取
fetch('data.xml')
.then(r => r.text())
.then(str => {
const parser = new DOMParser();
const doc = parser.parseFromString(str, 'application/xml');
if (doc.documentElement.nodeName === 'parsererror') {
throw new Error('Invalid XML: ' + doc.documentElement.textContent);
}
const items = doc.getElementsByTagName('item');
return Array.from(items).map(el => el.querySelector('name')?.textContent?.trim() || '');
})
.catch(err => console.error(err));
提取多层级嵌套节点时避免 getElementsByTagName 的陷阱
getElementsByTagName 是全局查找，不区分父子层级。例如 doc.getElementsByTagName('name') 会同时拿到 A 和 B，无法按上下文区分。
- 改用
querySelector或querySelectorAll：支持 CSS 选择器，如book author name、review > name - 或先定位父节点，再在其子树中调用
getElementsByTagName，如authorEl.getElementsByTagName('name')[0] - 注意：XML 标签名区分大小写，
querySelector('NAME')不会匹配 - 若节点可能不存在，务必用可选链
?.textContent或先判空，避免Cannot read property 'textContent' of undefined
TextDecoder 预处理，这不是 DOM 解析层能解决的问题。
