本文详解如何正确解析 API 返回的 JSON 响应中的 HTML 片段，并使用 DOMParser 精准获取具有特定 ID（如 ig-tooltip）的元素内容，避免因误解析 JSON 字符串导致 getElementById 返回 null 的常见错误。
本文详解如何正确解析 api 返回的 json 响应中的 html 片段，并使用 domparser 精准获取具有特定 id（如 `ig-tooltip`）的元素内容，避免因误解析 json 字符串导致 `getelementbyid` 返回 null 的常见错误。
在调用 MediaWiki 类 API（如 api.php?action=parse）时，返回的 HTML 内容并非直接位于 data.parse.text 对象顶层，而是嵌套在 data.parse.text['*'] 这一特殊属性中——这是 MediaWiki API 的标准响应格式，用于兼容 JSON 中不允许以星号开头的键名限制（实际等价于 data.parse.text["*"]）。
原始代码中使用 JSON.stringify(data.parse.text) 将整个对象转为字符串后再解析，导致 DOMParser 实际处理的是类似 "{"*": "<div id='\"ig-tooltip\"'>..."} 的 JSON 文本，而非纯 HTML，因此 <code>getElementById("ig-tooltip") 必然返回 null。
✅ 正确做法是直接提取 data.parse.text['*'] 的字符串值，并以 "text/html" 类型解析：
async function getSkillData(page) {
try {
const response = await fetch(
`https://tarisland.wiki/wiki/api.php?action=parse&format=json&origin=*&page=${page}`
);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
// ✅ 关键修正：取 data.parse.text['*'] 的原始 HTML 字符串
const htmlString = data.parse?.text?.['*'];
if (!htmlString) {
throw new Error('Expected HTML content not found in API response');
}
const doc = new DOMParser().parseFromString(htmlString, 'text/html');
const tooltipEl = doc.getElementById('ig-tooltip');
if (tooltipEl) {
console.log('Tooltip content:', tooltipEl.innerHTML.trim());
return tooltipEl.innerHTML;
} else {
console.warn('Element with ID "ig-tooltip" not found in parsed HTML');
return null;
}
} catch (error) {
console.error('Error fetching or parsing skill data:', error);
throw error;
}
}
// 调用示例
getSkillData('Axe_Cyclone');⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- 始终校验
data.parse.text['*']是否存在，避免运行时错误； -
DOMParser不执行脚本、不加载外部资源，仅构建内存 DOM 树，因此无需担心 XSS（但若后续将内容插入页面，仍需自行 sanitization）； - 若目标元素可能动态生成或依赖 CSS/JS 渲染，
DOMParser无法模拟浏览器渲染行为，此时需考虑 Puppeteer 等服务端渲染方案； - MediaWiki API 返回的 HTML 可能含相对路径、未闭合标签等，
DOMParser具备一定容错能力，但仍建议检查解析后doc.body是否包含预期结构。
通过精准定位 HTML 数据源并合理使用原生 DOM 解析能力，即可稳定、高效地从 API 响应中提取任意 ID 元素的内容，为前端数据增强与动态卡片生成提供可靠基础。
