Alternatives for list methods for IE?

Question

I am looking for a way to do node.classList.contains("foo") in Internet Exploder 7-9 without needing to refactor major portions of my code. This method is present in all other browsers (even IE10).

I have found Code with classList does not work in IE? but I dont understand how I would use this for replacing the .contains() method.

I already do have code that let's me run isolated code for certain browsers only, so giving IE some extra or different code isn't a problem.

Is there a way to add said method via classList's prototype or some other handy way to work with className?

https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills#classlist — Bergi, Apr 24 '13 at 14:25
The MDN Documentation on [**element.classList**](https://developer.mozilla.org/en-US/docs/DOM/element.classList) shows a JavaScript shim for IE8-9 if that is of some help. I know it doesn't show IE7 but its hopefully a start. Your biggest problem will be `...without needing to refactor major portions of my code` If you need to support IE7-9 then I think you are just better of not to be using any IE10-only compatible features in the first place and `classList` is one of the features only support IE10+ and other browsers off course. — Nope, Apr 24 '13 at 14:26

Matt · Accepted Answer · 2013-04-24T14:32:08.230

This just isn't possible.

At first glance, you'd have thought you'd have been able to patch your own classList implementation into HTMLElement if it didn't exist already;

if (!("classList" in document.createElement("div"))) {
    HTMLElement.prototype.classList = {
        contains: function () {

        }
    };
}

However:

Your contains implementation has no way to access the DOMElement (this is the classList object, not the element
Extending DOM objects in older IE just doesn't work.

Your only option is to replace all your usage of classList with your own wrapper function, which uses the classList functionality if available, and falls back to your own implementation if it doesn't.

var classListWrapper = (function () {
    if ("classList" in document.createElement("div")) {
      return {
        add: function (el, class) {
          el.className.add(class);
        },
        remove: function (el, class) {
          el.className.remove(class);
        },
        // etc.
      }
    } else {
      return {
        add: function (el, class) {
          el.className += ' ' + class;
        },
        remove: function (el, class) {
          el.className = (' ' + el.className + ' ').replace(' ' + class + ' ', ' ');
        },
        // etc.
      };
    }
}());

... and then in your code use classListWrapper.add(element, class) instead.

Thank you for explaining the hows and whys of this problem! I've used a similar solution to what you suggested with one of the snippets Bergi provided. — Cobra_Fast, Apr 24 '13 at 14:45

Alternatives for list methods for IE?

1 Answers1