DOMTokenList 没有 supports() 方法，浏览器目前完全不支持该 API；它常被误认为 CSS.supports() 或过时草案内容，实际应依场景选用 CSS.supports()、getAttribute() 校验或 getComputedStyle() 验证。
DOMTokenList.prototype.supports 是个不存在的方法
直接说结论：DOMTokenList 没有 supports() 方法，浏览器目前（截至 Chrome 125 / Firefox 126 / Safari 17.5）**完全不支持该 API**。你查到的文档或示例大概率混淆了 CSS.supports() 或仍在草案阶段的提案（如 CSS Typed OM 中的 css.supportsProperty()），但和 DOMTokenList 无关。
为什么你会看到“DOMTokenList.supports”这个说法
常见混淆来源有三个：
- 把
Element.prototype.toggleAttribute()的布尔返回值误当作“支持检测”——它只表示操作是否成功（如属性是否存在、值是否被移除），不校验值合法性 - 将
CSS.supports('display', 'flex')错记为 DOMTokenList 方法 - 参考了过时的 WHATWG 草案或实验性 Polyfill，但该方法从未进入正式标准，也未被任何主流引擎实现
实际想检测“某个属性是否支持指定值”，该用什么
这取决于你想检测的具体场景，没有通用 DOMTokenList 方案，但有更可靠的替代路径：
- 对于
class属性的值（即element.classList）：CSS 类名本身无运行时“支持”概念，值是否生效取决于对应 CSS 规则是否存在。可用getComputedStyle(element).getPropertyValue('--my-var')配合自定义属性检测，或通过element.matches('.valid-class')判断类是否触发了某条样式规则（间接验证） - 对于
rel、type、inputmode等枚举型属性：查阅 HTML 标准确认合法值列表；运行时可用element.setAttribute('rel', 'foo')+element.getAttribute('rel') === 'foo'粗略判断是否被保留（注意：部分值会被静默标准化，如'stylesheet'→'stylesheet'，但'xyz'可能仍被存下来） - 对于 CSS 属性值（如
style.display = 'grid'）：必须用CSS.supports('display', 'grid')，这是唯一标准化的支持检测方式
别踩坑：classList.add() 不会报错，也不代表值“被支持”
element.classList.add('foo bar') 会静默拆分成两个 token 并添加，哪怕 'bar' 在 CSS 中根本没定义。DOM 层面它只是字符串集合操作，不涉及渲染引擎校验。常见误判是看到 class 存在就认为样式生效了——其实可能只是：
立即学习“前端免费学习笔记（深入）”；
- CSS 文件没加载
- 选择器权重不够
- 被
!important覆盖 - 父元素
display: none导致子元素样式不计算
真要确认样式是否起效，得结合 getComputedStyle 和视觉断言，而不是依赖 token 列表操作。
