HTML5 的准确判断依据是 document.doctype 存在且 name 为 'html'、publicId 和 systemId 均为空字符串;若 doctype 为 null 则无 DOCTYPE 声明,不属 HTML5。
document.doctype 判断是否为 HTML5HTML5 没有传统 DTD 声明,所以最直接的判断依据就是 document.doctype 是否存在、是否为空,以及它的 name 和 publicId 是否符合 HTML5 特征。
注意:不是看有没有 字符串,而是看浏览器解析后生成的 DOM 对象。
document.doctype 为 null → 页面未声明 DOCTYPE(或被解析失败),既不是 HTML4 也不是 HTML5document.doctype.name === 'html' 且 document.doctype.publicId === '' 且 document.doctype.systemId === '' → 符合 HTML5 规范document.doctype.name === 'html' 但 publicId 非空(如 '-//W3C//DTD HTML 4.01//EN')→ 是 HTML4/XHTMLinnerHTML 或字符串匹配页面源码里写的是 ,不代表浏览器就按 HTML5 解析——比如在某些旧版 IE 中混入 XML 命名空间、或服务端输出时被动态注释掉,都可能导致 document.doctype 为 null。
更常见的是:前端模板拼接时漏了 DOCTYPE,或 SSR 框架(如 Nuxt、Next)配置错误,导致生成的 HTML 没有 DOCTYPE 行,此时即使你写了 ,实际 document.doctype 仍是 null。
document.documentElement.outerHTML 或 document.querySelector('html') 只能查根元素,无法回溯 DOCTYPEdocument.all 或 document.compatMode 是间接推断,不可靠(如 compatMode === 'CSS1Compat' 可能出现在 quirks 模式下误判)document.doctype 在不同环境下的表现差异这个属性在所有现代浏览器中都可用,但要注意两个边界情况:
iframe.contentDocument.readyState === 'complete'),否则 contentDocument.doctype 可能为 null
document 不可用,自然无法检测 —— 这类场景本就不涉及页面渲染,无需判断data:text/html, 这类 data URL 加载页面时,Chrome 和 Firefox 均正确设置 doctype,但 Safari 早期版本曾返回 null(iOS 15.4+ 已修复)if (document.doctype) {
const isHTML5 = document.
doctype.name === 'html' &&
document.doctype.publicId === '' &&
document.doctype.systemId === '';
console.log('Is HTML5:', isHTML5);
} else {
console.log('No DOCTYPE declared');
}
DOCTYPE 的作用是触发标准模式(standards mode)或怪异模式(quirks mode)。HTML5 的 是最简触发方式,但它不是“唯一合法值”——只要 document.doctype.name === 'html' 且没有 publicId,浏览器就进入标准模式。
这意味着:哪怕你写成 ,只要解析后 doctype.publicId 为空,它依然是 HTML5 级别的标准模式。
,那只是开发约定
document.doctype?.name 和 document.compatMode 组合,比单看字符串更准确),此时 publicId 是空字符串但带引号,仍算标准模式,但 document.doctype.publicId 返回 '',无需额外 trim