Comment obtenir plusieurs éléments HTML à partir du nom de classe en utilisant getElementsByClassName()

GetElementsByClassName() est une méthode qui peut obtenir tous les éléments HTML pour lesquels le nom de la classe cible est défini. Cet article vous présentera l'utilisation spécifique de la méthode GetElementsByClassName().

Manuel recommandé  :
1.Manuel de référence de la dernière version HTML5
2.JavaScript chinois Manuel de référence

Par exemple, le nom de classe d'un élément HTML est le suivant

<h1 class="sample">标题</h1>
<p class="test">文本</p>
<a class="test" href="#">链接</a>

Il a pour fonction de donner le même nom de classe à plusieurs éléments HTML.

Ainsi, il y a généralement plusieurs noms de classe identiques dans un fichier HTML, en utilisant getElementsByClassName(), nous pouvons extraire tous les éléments HTML en utilisant des noms de classe arbitraires.

Comment utiliser getElementsByClassName()

Jetons d'abord un coup d'œil à la syntaxe de base

Spécifiez le nom de la classe à extraire dans la portée cible en utilisant une chaîne à utiliser.

doccument.getElementsByClassName( 类名 );

Un élément HTML entier peut être spécifié en définissant la portée cible sur document.

Bien sûr, vous pouvez également définir n'importe quelle plage. (Les détails seront décrits plus tard)

Notez également que la valeur de retour est une collection HTML très similaire à un tableau.

Méthode pour obtenir tous les éléments avec n'importe quel nom de classe

Supposons d'abord que vous disposez du code HTML suivant.

<h1 class="sample">标题1</h1>
<p class="test">文本1</p>
<h2 class="sample">标题2</h2>
<p class="test">文本2</p>

a deux noms de classe sample et test

Par exemple, pour obtenir tous les éléments HTML avec le nom de classe "test", vous pouvez écrire comme suit.

var result = document.getElementsByClassName('test');
console.log(result[0]);
console.log(result[1]);

Résultats de l'exécution

<p class="test">文本1</p>
<p class="test">文本2</p>

Si "test" est spécifié sous forme de chaîne dans le paramètre, vous pouvez obtenir une collection de tous les éléments HTML contenant le nom de la classe. Après

, si vous utilisez la sortie du tableau comme indice, vous pouvez obtenir des éléments HTML, tels que les résultats d'exécution.

Spécifier les méthodes pour plusieurs classes

Par exemple, le code HTML suivant

<h1 class="sample test">标题1</h1>
<p class="test">文本1</p>
<h2 class="sample test">标题2</h2>
<p class="test">文本2</p>

Dans cet exemple, les éléments h1 et h2 reçoivent 2 Noms de classe

Même dans ce cas, vous pouvez obtenir toutes les classes en fournissant plusieurs noms de classe au paramètre.

var result = document.getElementsByClassName('sample test');
console.log(result[0]);
console.log(result[1]);

Résultats de l'exécution

<h1 class="sample test">标题1</h1>
<h2 class="sample test">标题2</h2>

Utilisation de GetElementsByClassName()         

Méthode pour spécifier des éléments racine autres que le document

Regardons les éléments HTML suivants

<h1 class="sample test">标题1</h1>
<p class="test">文本1</p>
<div id="wrap">
    <h2 class="sample test">标题2</h2>
    <p class="test">文本2</p>
</div>

Dans cet exemple, une structure hiérarchique est formée à l'aide d'éléments div.

En le décrivant de cette manière, par exemple, seuls les éléments HTML contenus dans le wrapper de la valeur de l'attribut id peuvent être utilisés comme objets.

Méthodes de spécification des classes de recherche de plage d'éléments

Si vous définissez la portée d'un élément div comme ci-dessus, écrivez-le comme suit.

var div = document.getElementById('wrap');
var result = div.getElementsByClassName('test sample');
console.log(result[0]);

Résultats de l'exécution

<h2 class="sample test">标题2</h2>

Tout d'abord, préparez getElementById() pour obtenir l'élément div.

Après cela, exécutez getElementsByClassName() avec l'élément div obtenu comme objet.

À en juger par les résultats de l'exécution, seul l'élément h2 au sein de l'élément div est obtenu.

Articles photo recommandés : ​ ​ ​  
1.Comment utiliser getElementsByClassName() ? Résumé de l'utilisation de l'instance getElementsByClassName()
Recommandations vidéo associées : ​
1.Tutoriel vidéo Dugu Jiujian (1)_HTML5 ​ mais

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!