Comment puis-je récupérer des éléments par classe en JavaScript, en particulier pour la compatibilité avec IE ?

Récupération d'éléments par classe en JavaScript, y compris la compatibilité IE

Obtenir un tableau d'éléments en fonction de leur classe est une tâche courante en JavaScript. Cependant, pour les navigateurs qui ne prennent pas en charge nativement document.getElementsByClassName(), comme IE, une approche alternative est nécessaire.

Une solution populaire est la fonction de Jonathan Snook. Cette fonction utilise une expression régulière pour tester la propriété className de chaque élément. Cependant, dans IE, il génère une erreur indiquant "L'objet ne prend pas en charge cette propriété ou cette méthode."

La clé est de réaliser que getElementsByClassName() n'est pas une méthode de l'objet document. Au lieu de cela, il doit être appelé directement sur le nœud où vous souhaitez rechercher des éléments :

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

Pour IE8, une approche plus concise consiste à polyfiller la fonction getElementsByClassName() :

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

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

Grâce à ces techniques, vous pouvez récupérer des éléments par classe, garantissant ainsi la compatibilité avec IE et les autres navigateurs.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!