blob: 93148bfffb0b7d287384961bf404f4840a2c6256 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
|
---
title: document.getElementsByClassName
slug: Web/API/Document/getElementsByClassName
tags:
- API
- DOM
- Méthodes
- Reference
translation_of: Web/API/Document/getElementsByClassName
---
{{APIRef("DOM")}}
Renvoie un objet de type tableau de tous les éléments enfants qui ont tous les noms de classe donnés. Lorsqu'il est appelé sur l'objet document, le document complet est recherché, y compris le nœud racine. Vous pouvez également appeler {{domxref ("Element.getElementsByClassName", "getElementsByClassName ()")}} sur n'importe quel élément; il retournera uniquement les éléments qui sont les descendants de l'élément racine spécifié avec les noms de classes donnés.
## Syntaxe
var elements = document.getElementsByClassName(names); // or:
var elements = rootElement.getElementsByClassName(names);
- _elements_ est une {{domxref ("HTMLCollection")}} des éléments trouvés.
- _names_ est une chaîne représentant le nom de la classe des éléments à trouver.
- getElementsByClassName peut être appelé sur n'importe quel élément, pas seulement sur le document. L'élément sur lequel il est appelé sera utilisé comme racine de la recherche.
## Exemples
Trouve tous les éléments ayant la classe « test » :
document.getElementsByClassName('test')
Trouve tous les éléments ayant les classes « rouge » et « test » :
document.getElementsByClassName('rouge test')
Trouve tous les éléments qui ont la classe « test » à l'intérieur d'un élément ayant l'ID « main » :
document.getElementById('main').getElementsByClassName('test')
Nous pouvons également utiliser les méthodes de Array.prototype sur toute {{domxref ("HTMLCollection")}} en passant HTMLCollection comme valeur de la méthode. Ici, nous allons trouver tous les éléments div qui ont une classe de 'test':
```js
var testElements = document.getElementsByClassName('test');
var testDivs = Array.prototype.filter.call(testElements, function(testElement){
return testElement.nodeName === 'DIV';
});
```
XXX writeme == Notes == Une méthode semblable existe pour \<code>Element\</code>
## Obtenir la classe des éléments test
C'est la méthode d'opération la plus couramment utilisée.
```html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="parent-id">
<p>hello word1</p>
<p class="test">hello word2</p>
<p >hello word3</p>
<p>hello word4</p>
</div>
<script>
var parentDOM = document.getElementById("parent-id");
var test=parentDOM.getElementsByClassName("test");//test is not target element
console.log(test);//HTMLCollection[1]
var testTarget=parentDOM.getElementsByClassName("test")[0];//here , this element is target
console.log(testTarget);//<p class="test">hello word2</p>
</script>
</body>
</html>
```
## Compatibilité des navigateurs
{{Compat("api.Document.getElementsByClassName")}}
## Spécification
- [W3C: getElementsByClassName](https://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#dom-document-getelementsbyclassname)
|
