compatibilité document.getElementsByClassName JavaScript avec IE

Question

Quelle est la meilleure méthode pour récupérer un tableau d'éléments qui ont une certaine classe?

Je voudrais utiliser document.getElementsByClassName mais IE ne prend pas en charge.

J'ai donc essayé un Jonathan Snook la solution:

function getElementsByClassName(node, classname) {
    var a = [];
    var re = new RegExp('(^| )'+classname+'( |$)');
    var els = node.getElementsByTagName("*");
    for(var i=0,j=els.length; i<j; i++)
        if(re.test(els[i].className))a.push(els[i]);
    return a;
}
var tabs = document.getElementsByClassName(document.body,'tab');

...mais IE dit encore:

Cet objet ne gère pas cette propriété ou cette méthode

Des idées, des méthodes, des corrections de bug?

Merci à l'avance!

Je préfère ne pas utiliser toutes les solutions impliquant jQuery ou autres "encombrants javascript".

Mise à jour:

Je l'ai eu à travailler!!!

Comme @joe mentionné la fonction n'est pas une méthode de document.

Donc, le code de travail devrait ressembler à ceci:

function getElementsByClassName(node, classname) {
    var a = [];
    var re = new RegExp('(^| )'+classname+'( |$)');
    var els = node.getElementsByTagName("*");
    for(var i=0,j=els.length; i<j; i++)
        if(re.test(els[i].className))a.push(els[i]);
    return a;
}
var tabs = getElementsByClassName(document.body,'tab');

...Aussi si vous avez seulement besoin d'IE8+ support à ce travail:

if(!document.getElementsByClassName) {
    document.getElementsByClassName = function(className) {
        return this.querySelectorAll("." + className);
    };
    Element.prototype.getElementsByClassName = document.getElementsByClassName;
}

Qui finit par être beaucoup plus petit quand minifiés:

(function(d,g){d[g]||(d[g]=function(g){return this.querySelectorAll("."+g)},Element.prototype[g]=d[g])})(document,"getElementsByClassName");

Et vous l'utilisez juste comme d'habitude:

var tabs = document.getElementsByClassName('.tab');

ou

var tabs = document.getElementsByClassName('.tab');

Answer 1

Il n’est pas une méthode du document :

Answer 2

vous pouvez créer la fonction pour les navigateurs plus anciens

Answer 3

<pre><code></code><p><code></code></p></pre>

Answer 4

Vous ne peut pas vraiment répliquer getElementsByClassName, car elle retourne un nodeList, et donc sa valeur est sous tension et met à jour avec le document.

Vous pouvez retourner un tableau statique d’éléments qui partagent le même classnames -, mais il ne sera pas ' know'when le document change.

(Il ne prendra pas trop de ce genre de choses pour rendre une bibliothèque svelte...)

Exemple de

var A = getArrayByClassNames ('sideBar local')

Answer 5

IE8 :