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()；若需保留原始格式（如<pre class="brush:php;toolbar:false;"></code> 类字段），则跳过 trim</li> </ul> <H3>用 <code>fetch</code> + <code>DOMParser</code> 实现更现代的解析方式</H3> <p>当 XML 来源是字符串（比如后端返回的 XML 片段、AJAX 响应体为 <code>text</code> 类型），或你想绕过 <code>XMLHttpRequest</code> 的 MIME 限制时，<code>DOMParser</code> 是更可控的选择。它不依赖 HTTP 响应头，只要传入字符串和正确类型即可。</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> <ul> <li><code>DOMParser.parseFromString(xmlStr, 'application/xml')</code> 返回 Document 对象</li> <li>务必检查 <code>parsererror</code> 元素是否存在：若 XML 有语法错误，浏览器会在解析结果中插入一个 <code><parsererror></code> 根节点</li> <li>推荐先判断 <code>doc.documentElement.nodeName === 'parsererror'</code>，再继续提取</li> </ul> <pre class="brush:php;toolbar:false;">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));</pre> <h3>提取多层级嵌套节点时避免 <code>getElementsByTagName的陷阱getElementsByTagName是全局查找，不区分父子层级。例如<book><author><name>A</name></author><review><name>B</name></review></book>中调用doc.getElementsByTagName('name')会同时拿到 A 和 B，无法按上下文区分。- 改用
querySelector或querySelectorAll：支持 CSS 选择器，如book author name、review > name - 或先定位父节点，再在其子树中调用
getElementsByTagName，如authorEl.getElementsByTagName('name')[0] - 注意：XML 标签名区分大小写，
querySelector('NAME')不会匹配<name></name> - 若节点可能不存在，务必用可选链
?.textContent或先判空，避免Cannot read property 'textContent' of undefined
<?xml version="1.0" encoding="GBK"?>）与文件真实编码不一致，会导致中文乱码或解析失败 —— 浏览器只认 UTF-8（或 UTF-16），其他编码需服务端转码或前端用TextDecoder预处理，这不是 DOM 解析层能解决的问题。 - 改用
