IE 8: Object doesn't support property or method 'getElementsByClassName'

Question

I'm using the diapo slider which seems to work in all other browsers except for internet explorer 8.

After running ie8 in debug mode I get the following errors:

SCRIPT438: Object doesn't support property or method 'getElementsByClassName' prototype.js, line 5988 character 5

return function(className, parentElement) {
    return $(parentElement || document.body).getElementsByClassName(className);
  };

SCRIPT438: Object doesn't support property or method 'fireEvent' prototype.js, line 5736 character 7

if (document.createEvent)
      element.dispatchEvent(event);
    else
      element.fireEvent(event.eventType, event);

    return Event.extend(event);

I am running this slider in the magento platform and it seems that prototype script in the one having the problem. The version of prototype that its using is 1.7 so that rules out the possible fix of a script update.

Note: Although, I'm not having a display issue in ie9, I am getting the following error:

SCRIPT438: Object doesn't support property or method 'dispatchEvent' prototype.js, line 5734 character 7

if (document.createEvent)
      element.dispatchEvent(event);
    else
      element.fireEvent(event.eventType, event);

    return Event.extend(event);

These are the scripts that are required for the diapo slider to work, loaded with the script tag in the header. I'm not sure but maybe some of these scripts are conflicting with existing scripts:

<script type='text/javascript' src='http://www.pixedelic.com/plugins/diapo/scripts/jquery.min.js'></script>
<script type='text/javascript' src='http://www.pixedelic.com/plugins/diapo/jquery.mobile-1.0rc2.customized.min.js'></script>
<script type='text/javascript' src='http://www.pixedelic.com/plugins/diapo/jquery.easing.1.3.js'></script>
<script type='text/javascript' src='http://www.pixedelic.com/plugins/diapo/jquery.hoverIntent.minified.js'></script>
<script type='text/javascript' src='http://www.pixedelic.com/plugins/diapo/scripts/diapo.js'></script>

Solution

IE8 does not support getElementsByClassName. However, it does support querySelectorAll. So, I suggest to write a polyfill using querySelectorAll.

document.getElementsByClassName('foo')

turns into

document.querySelectorAll('.foo'); // Prefixed dot.

Note that Prototype.js deprecates the use of getElementsByClassName in favour of $$ and Element#select.

A quick fix for IE8:

<!--[if IE 8]><script>
document.getElementsByClassName = 
Element.prototype.getElementsByClassName = function(class_names) {
    // Turn input in a string, prefix space for later space-dot substitution
    class_names = (' ' + class_names)
        // Escape special characters
        .replace(/[~!@$%^&*()_+\-=,./';:"?><[\]{}|`#]/g, '\\$&')
        // Normalize whitespace, right-trim
        .replace(/\s*(\s|$)/g, '$1')
        // Replace spaces with dots for querySelectorAll
        .replace(/\s/g, '.');
    return this.querySelectorAll(class_names);
};
</script><![endif]-->

Notes:

• It does support multiple class names.
• It does not support empty ('') class names. It's trivial to add support for these, if you want.

Demo: http://jsfiddle.net/HL4FL/21/

Comments

[gdinari]

Thanks Rob, but how would I apply this fix?...I updated my post with more relevant details about the scripts used. Please let me know if this helps. Thanks a mil!

[Rob W]

You're using jQuery and Prototype.js on the same page. Any chance that they are conflicting with each other? Diapo does not use Prototype.js, but you're still getting Prototype.js-related errors.

[gdinari]

Yeah, the prototype script is a part of the magento platform so its uploaded by default...I could try to disable it just for the homepage, but Im interested in your polyfill solution too

[Rob W]

@gdinari See updated answer for the polyfill. This has to be included before Prototype.js

[gdinari]

Perfect! Thanks a mil Rob. The days of wrecking my brain was worth it, for this fix. Thank again

[shorif2000]

How can i fix for ie7?

[Rob W]

@bonez Use XPath, e.g. as shown here: stackoverflow.com/questions/6584635/… (note: the code over there does not sanitize the input, so either edit in the parameter sanitization from my answer, or don't use unusual characters in your class name).