Maison >interface Web >js tutoriel >Comment puis-je récupérer des éléments par classe en JavaScript, en particulier pour la compatibilité avec IE ?

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

Susan Sarandon
Susan Sarandonoriginal
2024-11-05 21:41:02879parcourir

How Can I Retrieve Elements by Class in JavaScript, Especially for IE Compatibility?

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn