76 votes

compatibilité document.getElementsByClassName JavaScript avec IE

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');

56voto

Joe Points 34413

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

17voto

gdarcan Points 311

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

13voto

Mike_OBrien Points 777
<pre><code></code><p><code></code></p></pre>

10voto

kennebec Points 33886

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')

9voto

poopysprint Points 1421

IE8 :

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X