使用 babel-polyfill 后，classList.replace() 不是方法或 IE11 中的属性

Question

我有一个网络应用程序需要支持 IE11。我正在使用 ES6+ 对其进行编码并使用 babel-polyfill 以便它与 IE11 兼容。我在 IE11 中使用箭头函数、匿名函数和其他 ES6+ 功能没有问题。但是，出于某种原因，element.classList.replace() 方法没有得到 polyfilled 或其他原因，因为 IE11 似乎找不到它。

MDN ClassList

所以我想做的是获取 html 元素的列表，循环每个元素并将 CSS class 替换为另一个 CSS class（很简单吧？）。那么，IE11 抛出以下错误“对象不支持属性或方法 'replace'。想法？

Webpack版本：4.32.2， @babel/core: 7.4.5, @babel/polyfill: 7.4.4

这是我的 JS：

var invalidClassElement = document.querySelectorAll("[aria-owns*=".concat(id, "]"))[0].childNodes;
      invalidClassElement.forEach(function (node) {
        if (node.classList.contains('k-invalid')) {         
         
         node.classList.replace('k-invalid', 'k-default');
          
          // The code below works in IE11.
          // node.classList.remove('k-invalid');
          // node.classList.add('k-default');
        }

Answer 1

babel-polyfill 不填充 classList，IE11 对 classList 的支持有限。您需要一个额外的 polyfill，正如您提供的 MDN 的 link 所示。

另请参阅此现有答案：

还有一个相关的 core-js 问题（被 babel-polyfill 使用，所以解释了为什么它没有实现）：https://github.com/zloirock/core-js/issues/287

Answer 2

旧 post，但我制作了一个适用于 IE10-11 的 polyfill。我需要一个，但找不到 :(

DOMTokenList.prototype.replace = function (a, b) {
    var arr = Array(this);
    var regex = new RegExp(arr.join("|").replace(/ /g, "|"), "i");
    if (!regex.test(a)) {
        return this;
    }
    this.remove(a);
    this.add(b);
    return this;
}

使用 babel-polyfill 后，classList.replace() 不是方法或 IE11 中的属性

classList.replace() is not a method or property in IE11 after using babel-polyfill

html

javascript

polyfills

使用 babel-polyfill 后，classList.replace() 不是方法或 IE11 中的 属性

classList.replace() is not a method or property in IE11 after using babel-polyfill

html

javascript

polyfills

使用 babel-polyfill 后，classList.replace() 不是方法或 IE11 中的属性