parsefromstring 解析 html 字符串需传入 "text/html" 类型，返回完整 document 对象，内容默认在 body 内，查询元素应使用 doc.body.queryselector() 而非 doc.queryselector()。
parseFromString 解析 HTML 字符串的基本用法
直接调用 DOMParser.prototype.parseFromString 即可，传入 HTML 字符串和 MIME 类型 "text/html"。注意必须用这个类型——用 "application/xml" 或 "text/xml" 会导致解析失败或行为异常（比如忽略 <script></script>、<style></style>，甚至抛出语法错误）。
示例：
const parser = new DOMParser();
const doc = parser.parseFromString("<div><p>hello</p></div>", "text/html");
console.log(doc.body.innerHTML); // "hello"
- 返回的是完整的
Document对象，有head、body、documentElement等标准属性 - 即使输入字符串不含
标签，浏览器也会自动补全基本结构 - 不执行脚本，不加载外部资源（如
<img src>不发起请求）
为什么 document.querySelector 有时找不到元素？
常见原因是误把解析结果当成了“片段”，而实际上 parseFromString 返回的是完整文档，所有内容默认在 body 内（除非字符串显式含 ）。如果你的 HTML 字符串是纯片段（如 "<span>foo</span>"），它会被包裹进自动生成的 中，所以得从 doc.body 开始查。
- 错误写法：
doc.querySelector("span")—— 可能返回null（取决于浏览器对无结构字符串的兜底策略） - 稳妥写法：
doc.body.querySelector("span")或doc.querySelector("body span") - 更健壮的做法：统一用
doc.body.firstElementChild或遍历doc.body.children获取根级节点
与 innerHTML + createElement 的关键区别
parseFromString 生成的是独立的 Document，节点不属于当前页面 DOM 树，不会触发样式计算、布局或事件绑定；而 innerHTML 赋值到一个临时 div 创建的是 DocumentFragment 的模拟，实际仍受当前文档上下文影响（比如 CSS 继承、自定义元素定义）。
- 安全性：两者都不自动执行脚本，但
parseFromString更隔离——连baseURI都是空的，相对路径解析会失败 - 兼容性：
parseFromString在 IE10+ 支持"text/html"，IE9 及更早只支持 XML 模式（会报错） - 性能：对长字符串，
parseFromString通常比反复操作innerHTML更快，尤其需要多次提取不同节点时
处理编码与特殊字符的坑
传入的字符串必须是已解码的 JavaScript 字符串，不能是 HTML 实体编码的内容（如 < 不会自动转成 ）。
- 如果原始数据来自服务端 HTML 转义文本，先用
textarea或DOMParser自身解析一次实体（但别套娃） - 中文、emoji、数学符号等 Unicode 字符完全没问题，只要 JS 字符串本身正确
- 注意换行和空白：HTML 解析器会按标准折叠空白，
"a<span> b </span>c"中的空格可能被合并，不要依赖原始空白结构做匹配
真正麻烦的是 script 标签里的字符串字面量或注释里混了未转义的 —— 这会导致解析提前截断，且 DOMParser 不报错，静默失败。遇到动态生成的脚本内容，务必预处理转义。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
