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>

Answer 1

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/