JavaScript DOMParser的parseFromString方法怎么用-XML/RSS教程-PHP中文网

JavaScript DOMParser的parseFromString方法怎么用

月夜之吻

发布： 2025-12-22 02:31:19

原创

115人浏览过

DOMParser.parseFromString用于安全解析HTML/XML字符串为DOM文档，需传入字符串和MIME类型；"text/html"自动补全body结构，"application/xml"严格校验格式并可能返回parsererror。

javascript domparser的parsefromstring方法怎么用

DOMParser.parseFromString 用来把一段字符串（比如 HTML 或 XML）安全地转成 DOM 文档对象，不执行脚本、不加载外部资源，适合解析动态生成的 HTML 片段或服务端返回的结构化内容。

基本用法：指定类型很重要

必须传两个参数：要解析的字符串 + MIME 类型。类型决定了浏览器如何解析：

"text/html" → 按 HTML 规则解析（推荐用于 HTML 字符串）
"application/xml" 或 "text/xml" → 按 XML 规则解析（要求格式严格，有错误会报错）

示例：

const parser = new DOMParser();
const htmlStr = "<div><p>Hello</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/c1c2c2ed740f" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">Java免费学习笔记（深入）</a>”；</p><span>World</span></div>";
const doc = parser.parseFromString(htmlStr, "text/html");

console.log(doc.body.firstElementChild); // <div>...</div>

登录后复制

解析 HTML 时注意 body 包裹行为

用 "text/html" 解析时，DOMParser 会自动补全基础结构（类似浏览器加载 HTML 页面），把内容塞进中：

Phenaki

phenaki是一种从文本生成视频的模型

查看详情

即使你只传 "<p>hi</p>"，结果文档里 doc.body.innerHTML 就是 "<p>hi</p>"
doc.documentElement 是，doc.head 和 doc.body 都存在（可能为空）
想直接取解析出的元素？优先用 doc.body.children 或 doc.body.querySelector(...)

解析 XML 要小心格式和错误

XML 模式更严格：

标签必须闭合，大小写敏感，属性值必须加引号
哪怕一个缺失的 /> 或乱码，parseFromString 都会返回一个带错误信息的 XML 文档（不是抛异常）
可检查 doc.documentElement.nodeName === "parsererror" 来判断是否解析失败

示例：

const xmlStr = "<root><item id='1'>A</item></root>";
const xmlDoc = parser.parseFromString(xmlStr, "application/xml");
if (xmlDoc.documentElement.nodeName === "parsererror") {
  console.error("XML 解析失败", xmlDoc.documentElement.textContent);
}

登录后复制

常见用途和实用建议

从接口拿到 HTML 字符串后，提取其中某些元素（如 doc.body.querySelectorAll(".title")），比用 innerHTML + 正则安全得多
生成临时 DOM 做计算（比如测宽高、检查结构），用完就丢，不插入页面
避免用 "text/html" 解析用户输入的富文本——仍需做 XSS 过滤，DOMParser 不防恶意事件属性（如 onclick）
不需要完整文档？只想要片段节点？可以配合 document.adoptNode() 或直接取 doc.body.childNodes 转成 DocumentFragment

基本上就这些。不复杂但容易忽略 MIME 类型和解析后结构的位置。

以上就是JavaScript DOMParser的parseFromString方法怎么用的详细内容，更多请关注php中文网其它相关文章！