ie9 中 classlist 完全不可用，因 element.prototype.classlist 为 undefined；推荐轻量 polyfill 如 classlist.js，需确保在 dom 就绪前加载以避免白屏等静默错误。
IE9 中 classList 完全不可用，不是“部分支持”
IE9 原生不提供 Element.prototype.classList，调用 element.classList.add() 会直接抛出 TypeError: Object doesn't support property or method 'add'。这不是 API 行为差异，而是属性根本不存在——element.classList 在 IE9 下是 undefined。
验证方式很简单：console.log('classList' in document.documentElement) 在 IE9 返回 false；而 Chrome/Firefox/Edge 均返回 true。
推荐两个轻量、无依赖的 polyfill 方案
不要引入整套 core-js 或 babel-polyfill 来解决这一个点——体积大、污染全局、可能引发副作用。聚焦问题本身：
-
classlist.js（推荐）：仅 1.2KB（min+gzip），专注修复classList，CDN 可直引：<script src="https://cdnjs.cloudflare.com/ajax/libs/classlist/1.2.20171210/classList.min.js"></script> -
classlist-polyfill（备选）：npm 包名，但注意它和classlist.js是同一作者不同发布渠道，功能一致；若用 Webpack，可写在entry数组最前：['classlist-polyfill', './src/main.js'] - 避免用
dom4或webcomponentsjs：它们包含大量其他 polyfill，对classList属于过度加载
手动 patch 的边界情况必须处理
如果项目已禁用第三方脚本、或需最小化外部依赖，可手写 patch，但要注意三个关键点：
- 必须在
document就绪前执行（比如放在内<script></script>中），否则早于 DOM 的元素无法被增强 - 要覆盖全部 5 个方法：
add、remove、toggle、contains、item；只补add会导致后续toggle报错 -
length和value属性也要模拟，否则某些 UI 库（如 iview）读取el.classList.length会失败
最小可用 patch 示例（兼容 IE9–IE11）：
if (!('classList' in document.createElement('a'))) {
Object.defineProperty(HTMLElement.prototype, 'classList', {
get() {
const self = this;
function updateClass() {
self.className = self.className
.split(/s+/)
.filter(c => c)
.join(' ');
}
return {
add(...names) {
names.forEach(name => {
if (!self.className.includes(name)) {
self.className += ` ${name}`;
}
});
updateClass();
},
remove(...names) {
names.forEach(name => {
self.className = self.className.replace(new RegExp(`(^|\s)${name}(\s|$)`, 'g'), ' ');
});
updateClass();
},
toggle(name) {
if (this.contains(name)) this.remove(name);
else this.add(name);
},
contains(name) {
return (` ${self.className} `).indexOf(` ${name} `) !== -1;
},
item(i) { return self.className.split(/s+/)[i] || null; },
get length() { return self.className.trim().split(/s+/).filter(Boolean).length; },
get value() { return self.className; }
};
}
});
}
Vue/React 项目里最容易漏掉的加载时机
Webpack 构建项目常犯的错误是把 polyfill 放在 main.js 里「靠后」执行——比如在 new Vue() 或 ReactDOM.render() 之后。这时组件初始化时已读取过 classList，报错早已发生。
正确做法只有两种：
- Webpack
entry配置中前置加载，确保它在任何业务代码之前执行 - HTML 中用
<script></script>同步引入，且放在所有其他 JS 之前（包括vendorchunk）
尤其注意：Vue CLI 3+ 默认关闭了 polyfills 自动注入，babel-polyfill 不会自动补 classList，必须显式加。
真正麻烦的从来不是加一行 import，而是确认它在第一个 document.querySelector 调用前就已生效——这点极易被忽略，且错误现象（白屏、控制台静默失败）不提示具体原因。
