如何让DOMParser.parseFromString()使用标准模式而非Quirks怪异模式

问题描述 #

默认调用DOMParser.parseFromString()方法解析生成的HTML文档会处于Quirks（怪异）模式，需要可行方案配置该方法，使其生成的文档遵循Standard（标准）模式。

复现方式 #

当前页面对象的document.compatMode属性输出为'CSS1Compat'，代表当前页面处于标准模式；但通过DOMParser解析生成的文档compatMode属性输出为'BackCompat'，代表其处于怪异模式，复现代码如下：

console.log(document.compatMode) // 'CSS1Compat'

const doc = new DOMParser().parseFromString('<div>Hello World</div>', 'text/html');
console.log(doc.compatMode) // 'BackCompat'

解决方法 #

核心原因是传入的待解析HTML片段缺少标准文档类型声明。按照HTML解析规范，未检测到字符串最前置<!DOCTYPE html>声明的文档会自动进入怪异模式，DOMParser.parseFromString()本身没有提供单独切换文档模式的配置参数，直接在待解析的HTML字符串头部拼接标准doctype声明即可触发标准模式：

const content = '<div>Hello World</div>';
const standardModeDoc = new DOMParser().parseFromString(`<!DOCTYPE html>${content}`, 'text/html');
console.log(standardModeDoc.compatMode) // 输出 'CSS1Compat'，即标准模式

注意事项 #

• 该模式判断逻辑和浏览器直接加载网页的规则完全一致，不属于DOMParser的功能bug。
• 拼接的<!DOCTYPE html>声明会被解析为文档类型节点，不会作为普通DOM元素插入文档流，不会破坏原有HTML片段的结构。
• doctype声明必须放在待解析字符串的最开头，放在其他位置无法触发标准模式判断。

内容的提问来源于stack exchange，提问作者Yangshun Tay