gistfile1.js

/*
 * Minimal classList shim for IE 9
 * By Devon Govett
 * MIT LICENSE
 */


if (!("classList" in document.documentElement) && Object.defineProperty && typeof HTMLElement !== 'undefined') {
    Object.defineProperty(HTMLElement.prototype, 'classList', {
        get: function() {
            var self = this;
            function update(fn) {
                return function(value) {
                    var classes = self.className.split(/\s+/),
                        index = classes.indexOf(value);

                    fn(classes, index, value);
                    self.className = classes.join(" ");
                }
            }

            var ret = {                    
                add: update(function(classes, index, value) {
                    ~index || classes.push(value);
                }),

                remove: update(function(classes, index) {
                    ~index && classes.splice(index, 1);
                }),

                toggle: update(function(classes, index, value) {
                    ~index ? classes.splice(index, 1) : classes.push(value);
                }),

                contains: function(value) {
                    return !!~self.className.split(/\s+/).indexOf(value);
                },

                item: function(i) {
                    return self.className.split(/\s+/)[i] || null;
                }
            };
            
            Object.defineProperty(ret, 'length', {
                get: function() {
                    return self.className.split(/\s+/).length;
                }
            });

            return ret;
        }
    });
}

@devongovett Look to how some of the selector engines like Sizzle or NWMatcher detect class names. They have refined them for speed, at first glance yur class name operations look a little costly. Also extending the DOM leads to nothing but headache and dev tears.

That's exactly what it is supposed to be though - a polyfill. And I agree it can probably be improved but it was designed to be really small and I wrote it in about 5 minutes. :) If you've got improvements, by all means have at it.

@devongovett Polyfill or not, extending the DOM has been known to cause problems. Would be better if you made a small utility method that leveraged native functionality or forked for a fallback.

If you don't want to extend the DOM, don't use this shim. What problems do you see? It seems to work for me...

@devongovett I'm trying to save you some heart burn by giving you a heads up. I've spent many years working with libs like Prototype that extend the DOM and a lot of the time things seemed to work fine, for a time, but then fell apart down the road.

I added (half-assed) support for length https://gist.github.com/1383813

http://jsfiddle.net/rwaldron/GNcyp/

I understand support was aimed at IE8/9 but this causes script errors in IE 6/7 and 8.
IE 8 has window.Element but not window.HTMLElement.

It doesn't have Object.defineProperty either... better?

@rwldrn wouldn't length be better implemented as a getter? Otherwise if the user updates the className the length won't change.

@devongovett IE8 has Object.defineProperty. In fact, IE8's Object.defineProperty only works on DOM elements ;D

Yeah I realize that. I was referring to IE 6 and 7. Unfortunately the length getter wouldn't work in IE 8 either.

@devongovett In IE8 HTMLElement will be an undefined var reference and throw an error.

Also another heads up, String#split and IE are iffy when it comes to regexp support (rule of thumb: keep it really simple and test).
Your regexp could be simplified to just /\s+/.

@devongovett - it sure would, but like I said it's "half-assed" and only meant to work in IE8 right?

Eh! Screw IE < 9. Too many problems and I wasn't trying to support it in my app anyway. The regex is now simplified, and I added "real" length support via a getter. And to answer your question @rwldrn, it looks like IE does not have DOMTokenList.

Word.

Super late to this party, but my classList polyfill has true native .length by being an array (i.e. constructor's .prototype = []). You could try something like that.