querySelectorAll上的forEach在最近的Microsoft浏览器中不起作用

Question

我正在制作一个关于产品（颜色等）选择的脚本，它可以在除Internet Explorer(11)&Edge之外的所有浏览器中工作。

color参数的示例：

var color_btns = document.querySelectorAll('#color > p');
color_btns.forEach(function(color) {
    color.onclick = function () {
        color_btns.forEach(function(element) {
            if (element.classList.contains('selected')) {
                element.classList.remove('selected');
            }
        });
        color.classList.add('selected');
        document.querySelector('#f_color').value = color.dataset.id;
    };
});

我在IE和Edge的控制台中得到以下输出：

对象不支持属性或方法“for each”

null

Answer 1

大多数DOM方法和集合属性实际上不是数组，而是集合：

• QuerySelectorAll返回一个静态NodeList（在调用时匹配元素的快照）。
• GetElementsByTagName、GetElementsByTagNamens、GetElementsByClassName和ParentNode上的Children属性（元素是父节点）返回实时HTMLCollection实例（如果更改DOM，则该更改将实时反映在集合中）。
• GetElementsByName返回一个活动的NodeList（不是快照）。

NodeList最近才获得Foreach（以及keys和几个其他数组方法）。HTMLCollection没有也不会；事实证明，添加它们会破坏Web上太多的代码。

不过，NodeList和HTMLCollection都是可迭代的，这意味着您可以使用for-of循环遍历它们，通过扩展将它们扩展为数组([...theCollection])等。但是，如果您运行的浏览器NodeList没有foreach，那么它可能太老了，不具备任何ES2015+特性，比如for-of或迭代。

由于NodeList被指定为具有Foreach，所以您可以安全地对其进行多填充，而且非常容易：

if (typeof NodeList !== "undefined" && NodeList.prototype && !NodeList.prototype.forEach) {
    // Yes, there's really no need for `Object.defineProperty` here
    NodeList.prototype.forEach = Array.prototype.forEach;
}

在这种情况下，直接赋值很好，因为enumerable、configurable和writable都应该是true，并且它是一个值属性。(enumerable是true，这让我很惊讶，但在chrome/chromium/Edge/etc、Firefox、旧的遗留Edge和Safari上就是这样定义的）。

在您自己的代码中，如果您愿意，也可以使用HTMLCollection来实现这一点，只是要注意，如果您使用的是一些旧的DOM库，如MooTools或YUI或诸如此类的库，如果您将Foreach添加到HTMLCollection中，它们可能会混淆。

正如我前面所说，NodeList和HTMLCollection都被指定为可迭代（因为这个Web IDL规则）。如果您遇到了一个具有ES2015+功能的浏览器，但由于某种原因没有使集合可迭代，您也可以polyfill：

if (typeof Symbol !== "undefined" && Symbol.iterator && typeof NodeList !== "undefined" && NodeList.prototype && !NodeList.prototype[Symbol.iterator]) {
    Object.defineProperty(NodeList.prototype, Symbol.iterator, {
        value: Array.prototype[Symbol.itereator],
        writable: true,
        configurable: true
    });
}

(HTMLCollection也是如此。）

下面是一个同时使用这两种功能的示例，在IE11上尝试一下（例如）（尽管它只演示foreach)，在IE11上nodeList没有这些特性：

// Using only ES5 features so this runs on IE11
function log() {
    if (typeof console !== "undefined" && console.log) {
        console.log.apply(console, arguments);
    }
}
if (typeof NodeList !== "undefined" && NodeList.prototype) {
    // forEach
    if (!NodeList.prototype.forEach) {
        // Yes, there's really no need for `Object.defineProperty` here
        console.log("Added forEach");
        NodeList.prototype.forEach = Array.prototype.forEach;
    }
    // Iterability - won't happen on IE11 because it doesn't have Symbol
    if (typeof Symbol !== "undefined" && Symbol.iterator && !NodeList.prototype[Symbol.iterator]) {
        console.log("Added Symbol.iterator");
        Object.defineProperty(NodeList.prototype, Symbol.iterator, {
            value: Array.prototype[Symbol.itereator],
            writable: true,
            configurable: true
        });
    }
}

log("Testing forEach");
document.querySelectorAll(".container div").forEach(function(div) {
    var html = div.innerHTML;
    div.innerHTML = html[0].toUpperCase() + html.substring(1).toLowerCase();
});

// Iterable
if (typeof Symbol !== "undefined" && Symbol.iterator) {
    // Using eval here to avoid causing syntax errors on IE11
    log("Testing iterability");
    eval(
        'for (const div of document.querySelectorAll(".container div")) { ' +
        '    div.style.color = "blue"; ' +
        '}'
    );
}

<div class="container">
  <div>one</div>
  <div>two</div>
  <div>three</div>
  <div>four</div>
</div>