html无“模式匹配”标准属性，所谓文档模式匹配实为混淆input的pattern校验、css的:is()选择器及已淘汰的ie document.documentmode三者。
HTML 没有叫 “模式匹配” 的标准属性，也不存在 match、pattern-mode 或类似名称的全局文档级属性。所谓“文档模式匹配”，通常是混淆了三个不同层面的概念：HTML5 的 input 表单验证、CSS 的伪类选择器匹配、以及浏览器的文档模式（已淘汰的 IE 兼容模式）。下面直接说清楚怎么用、为什么容易错。
input 的 pattern 属性只对表单控件生效
这个属性不是定义“整个文档”的匹配逻辑，它只作用于 <input type="text">、<input type="tel"> 等可编辑文本输入框，用于客户端正则校验。
常见错误现象：
– 给 <div> 或 <code> 加 pattern，完全无效，浏览器忽略
– 正则写法不加 ^ 和 $，导致部分匹配就通过（比如 pattern="abc" 会接受 "xabcx"）
使用场景：限制手机号、邮编、自定义编码格式等轻量校验
立即学习“前端免费学习笔记（深入）”；
实操建议：
-
pattern值是字符串，不是正则字面量，不要写/abc/，直接写"abc"或"^[0-9]{6}$" - 必须配合
title属性，否则校验失败时提示为空白 - 不触发校验除非用户提交表单或调用
checkValidity()，不会实时监听输入
document.documentMode 是 IE 专属历史遗留字段
这是 IE 浏览器内部识别渲染模式（Quirks / Standards / Almost Standards）的只读属性，现代浏览器（Chrome/Firefox/Safari/Edge）返回 undefined，且该机制本身已被废弃。
常见错误现象：
– 在新项目里还检查 document.documentMode 来做兼容判断，结果永远走不到预期分支
– 误以为它能控制 HTML 解析行为，其实它只是“反映”当前页面被如何解析，不能“设置”
实操建议：
- 彻底移除对
document.documentMode的依赖，改用特性检测（如'fetch' in window）或 UA 字符串 + 版本号白名单（仅极少数必要场景） - 如果必须支持旧 IE，用
<meta http-equiv="X-UA-Compatible" content="IE=edge">强制标准模式，而非靠 JS 读取
CSS 中的 :matches()（现为 :is()）是选择器层面匹配
这个伪类用于简化复杂选择器，例如 :is(h1, h2, h3) 匹配任意一级标题。它属于 CSS 规范，和 HTML 文档结构定义无关，也不影响 DOM 解析或验证逻辑。
常见错误现象：
– 把 :is() 当成 JS 方法去调用，写成 document.querySelector(':is(h1)') 虽然可行，但误以为它有“动态匹配文档内容”的能力
– 在不支持的旧浏览器（如 IE、老版 Safari）中使用，导致样式完全失效且无降级
实操建议：
-
:is()是运行时匹配，每次重排/重绘都重新计算，避免在深层嵌套中滥用（性能敏感场景） - 用
:where()替代:is()可避免权重提升，更可控 - 别指望它能“匹配 HTML 属性值”或“做字符串通配”，它只匹配元素类型和关系
真正需要“文档级模式匹配”的需求，往往该交给 JS 的 querySelectorAll()、正则解析 HTML 字符串（谨慎！），或者服务端模板引擎处理。HTML 本身是声明式标记语言，没有运行时匹配引擎——这点最容易被名字带“match”“pattern”的 API 带偏。
