The object doesn't manage forEach Properties

Question

I have a script that use the method forEach that work on some Firefox browser but never on IE11.

The error is : The object doesn't manage forEach Properties

var clearContent = function clearContent() {
  var allDistricts = document.querySelectorAll(".district");
  allDistricts.forEach(function(item) {
    item.style.display = "none";
  });
};

Oh can I replace the method forEach easily ? Thanks

Answer 1

Use simple for loop:

 var clearContent = function clearContent() {
    var allDistricts = document.querySelectorAll('.district');
    for (var i=0; i<allDistricts.length; i++) {
      allDistricts[i].style.display = 'none';
    }
  };

Answer 2

NodeList.querySelectorAll is a somewhat new function that is not supported on obsolete browsers. ( querySelectorAll returns a NodeList )

MDN says it was first supported on Chrome 51 and FF 50, which were only released a couple of years ago (and, of course, it isn't supported at all on IE, which was released in 2013).

For a polyfill, you can use this:

if (window.NodeList && !NodeList.prototype.forEach) {
  NodeList.prototype.forEach = function (callback, thisArg) {
    thisArg = thisArg || window;
    for (var i = 0; i < this.length; i++) {
      callback.call(thisArg, this[i], i, this);
    }
  };
}