HTML5 的准确判断依据是 document.doctype 存在且 name 为 'html'、publicId 和 systemId 均为空字符串;若 doctype 为 null 则无 DOCTYPE 声明,不属 HTML5。

怎么用 document.doctype 判断是否为 HTML5
HTML5 没有传统 DTD 声明,所以最直接的判断依据就是 document.doctype 是否存在、是否为空,以及它的 name 和 publicId 是否符合 HTML5 特征。
注意:不是看有没有 字符串,而是看浏览器解析后生成的 DOM 对象。
-
document.doctype为null→ 页面未声明 DOCTYPE(或被解析失败),既不是 HTML4 也不是 HTML5 -
document.doctype.name === 'html'且document.doctype.publicId === ''且document.doctype.systemId === ''→ 符合 HTML5 规范 -
document.doctype.name === 'html'但publicId非空(如'-//W3C//DTD HTML 4.01//EN')→ 是 HTML4/XHTML
为什么不能只靠 innerHTML 或字符串匹配
页面源码里写的是 ,不代表浏览器就按 HTML5 解析——比如在某些旧版 IE 中混入 XML 命名空间、或服务端输出时被动态注释掉,都可能导致 document.doctype 为 null。
更常见的是:前端模板拼接时漏了 DOCTYPE,或 SSR 框架(如 Nuxt、Next)配置错误,导致生成的 HTML 没有 DOCTYPE 行,此时即使你写了 ,实际 document.doctype 仍是 null。
立即学习“前端免费学习笔记(深入)”;
- 用
document.documentElement.outerHTML或document.querySelector('html')只能查根元素,无法回溯 DOCTYPE - 用
document.all或document.compatMode是间接推断,不可靠(如compatMode === 'CSS1Compat'可能出现在 quirks 模式下误判)
document.doctype 在不同环境下的表现差异
这个属性在所有现代浏览器中都可用,但要注意两个边界情况:
- 在 iframe 中,需确保 iframe 已加载完成(
iframe.contentDocument.readyState === 'complete'),否则contentDocument.doctype可能为null - 在 Web Worker 或 service worker 中,
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 字符串
DOCTYPE 的作用是触发标准模式(standards mode)或怪异模式(quirks mode)。HTML5 的 是最简触发方式,但它不是“唯一合法值”——只要 document.doctype.name === 'html' 且没有 publicId,浏览器就进入标准模式。
这意味着:哪怕你写成 ,只要解析后 doctype.publicId 为空,它依然是 HTML5 级别的标准模式。
- 不要在构建脚本里硬校验源码是否含
,那只是开发约定 - 线上监控可采集
document.doctype?.name和document.compatMode组合,比单看字符串更准确 - 某些 CMS 输出的页面可能用自定义 DOCTYPE(如
),此时publicId是空字符串但带引号,仍算标准模式,但document.doctype.publicId返回'',无需额外 trim










