Comment puis-je rechercher et manipuler des éléments HTML par nom de classe en JavaScript ?

Recherche d'éléments par classe en JavaScript

Bien que la fonction getElementById() soit utile pour accéder aux éléments par leurs identifiants uniques, il existe des situations où vous devez localiser les éléments en utilisant leurs classes. JavaScript ne fournit pas de fonction native à cet effet, ce qui nécessite des approches alternatives.

Une solution consiste à exploiter la méthode getElementsByTagName(), qui récupère tous les éléments d'un type de balise spécifié. En parcourant ces éléments et en inspectant leur propriété className, vous pouvez identifier ceux qui correspondent à votre classe cible.

Le code suivant montre comment remplacer le contenu des éléments HTML en fonction de leur classe :

function replaceContentInContainer(matchClass, content) {
    var elems = document.getElementsByTagName('*'), i;
    for (i in elems) {
        if ((' ' + elems[i].className + ' ').indexOf(' ' + matchClass + ' ') > -1) {
            elems[i].innerHTML = content;
        }
    }
}

Dans cette fonction, nous parcourons tous les éléments de la page et vérifions si leur propriété className contient la matchClass spécifiée. Si une correspondance est trouvée, le code HTML interne de l'élément est mis à jour avec le contenu fourni.

Cette approche permet de manipuler les éléments en fonction de leurs classes, même si JavaScript n'offre pas de fonction dédiée à cet effet.

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!