Skip to content

Instantly share code, notes, and snippets.

@stereobooster
Created April 16, 2012 10:56
Show Gist options
  • Star 4 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save stereobooster/2397759 to your computer and use it in GitHub Desktop.
Save stereobooster/2397759 to your computer and use it in GitHub Desktop.
getElementsByClassName polyfill
/*jshint forin:true, noarg:true, noempty:true, eqeqeq:true, bitwise:true, strict:true, undef:true, curly:true, browser:true, indent:2, maxerr:50 */
(function (document) {
"use strict";
function getElementsByClassName(match, tag) {
if (document.getElementsByClassName) {
return document.getElementsByClassName(match);
}
var result = [],
elements = document.getElementsByTagName(tag || '*'),
i, elem;
match = " " + match + " ";
for (i = 0; i < elements.length; i++) {
elem = elements[i];
if ((" " + (elem.className || elem.getAttribute("class")) + " ").indexOf(match) > -1) {
result.push(elem);
}
}
return result;
}
}(document));
/*jshint forin:true, noarg:true, noempty:true, eqeqeq:true, bitwise:true, strict:true, undef:true, curly:true, browser:true, indent:2, maxerr:50 */
(function (document) {
"use strict";
if (document.getElementsByClassName) {
document.getElementsByClassName = function (match) {
var result = [],
elements = document.getElementsByTagName('*'),
i, elem;
match = " " + match + " ";
for (i = 0; i < elements.length; i++) {
elem = elements[i];
if ((" " + (elem.className || elem.getAttribute("class")) + " ").indexOf(match) > -1) {
result.push(elem);
}
}
return result;
};
}
}(document));
@mathiasbynens
Copy link

You’ll probably want to replace /[\t\n\r]/g with /[\t\n\f\r]/g as per http://www.whatwg.org/specs/web-apps/current-work/multipage/common-microsyntaxes.html#space-character:

The space characters, for the purposes of this specification, are U+0020 SPACE, U+0009 CHARACTER TABULATION (tab), U+000A LINE FEED (LF), U+000C FORM FEED (FF), and U+000D CARRIAGE RETURN (CR).


Also:

if ((" " + (elem.className || elem.getAttribute("class")) + " ").indexOf(match) > -1) {

I think you mean:

if ((" " + (elem.className || elem.getAttribute("class")) + " ").indexOf(" " + match + " ") > -1) {

Else, document.getElementsByClassName('oba') would match elements with e.g. class="foobarbaz".

@stereobooster
Copy link
Author

Original piece of code was taken from sizzle. I don't think we need so complex logic for this issue, so i simplified it.
In the second thought I understand it could be not polyfill but just local function.

@mathiasbynens
Copy link

The updated code still has the problem I described, e.g. document.getElementsByClassName('oba') would match elements with class="foobarbaz".

"" + ("this is the value of the class attribute").indexOf("ass") > -1; // true

@stereobooster
Copy link
Author

now i get it why there were those spaces

fixed

match = " " + match + " ";

@baamenabar
Copy link

In the polifill.js
Shouldn't the third line be
if (!document.getElementsByClassName) {
instead of
if (document.getElementsByClassName) {

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment