files/pt-pt/web/api/document/getelementsbyclassname/index.html


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

---
title: document.getElementsByClassName
slug: Web/API/Document/getElementsByClassName
tags:
  - Referência_do_DOM_Gecko
translation_of: Web/API/Document/getElementsByClassName
original_slug: DOM/document.getElementsByClassName
---
<p>{{ Fx_minversion_header(3) }} {{ ApiRef() }}</p>

<h3 id="Resumo" name="Resumo">Resumo</h3>

<p>Retorna um conjunto de elementos com o nome de classe fornecido. Quando chamado no objeto document, todo o documento é pesquisado incluindo o nó raiz. Você pode chamar também getElementsByClassName em qualquer elemento; isso retornará apenas elementos sob o elemento raiz especificado com o nome de classe fornecido.</p>

<h3 id="Sintaxe" name="Sintaxe">Sintaxe</h3>

<pre class="eval"><em>elementos</em> = document.getElementsByClassName(<em>nome</em>) // ou:<em>elementos</em> = elementoRaiz.getElementsByClassName(<em>nome</em>)
</pre>

<ul>
 <li><code>elementos</code> é um <code>NodeList</code> vivo de elementos encontrados na ordem que aparecem na árvore.</li>
 <li><code>nome</code> é uma<em>string</em> representando um nome de classe dos elementos.</li>
 <li><code>getElementsByClassName</code> pode ser chamado em qualquer elemento, não apenas no <code>document</code>. O elemento em que é chamado será usado como a raiz da pesquisa.</li>
</ul>

<h3 id="Exemplos" name="Exemplos">Exemplos</h3>

<p>Devolve todos os elementos que têm a classe 'teste':</p>

<pre class="eval"> document.getElementsByClassName('teste')
</pre>

<p>Devolve todos os elementos que têm as classes 'vermelho' e 'teste':</p>

<pre class="eval"> document.getElementsByClassName('vermelho teste')
</pre>

<p>Devolve todos os elementos que têm a classe 'teste', dentro de um elemento que tem o ID 'principal':</p>

<pre class="eval"> document.getElementById('principal').getElementsByClassName('teste')
</pre>

<p>E se formos adiante e adicionarmos extras do Array do <a href="pt/New_in_JavaScript_1.6">JavaScript 1.6</a>, podemos fazer algumas combinações realmente boas.</p>

<p>Encontre todos os elementos div que têm a classe 'teste'</p>

<pre class="eval"> Array.filter( document.getElementsByClassName('teste'), function(elem){
   return elem.nodeName == 'DIV';
 });
</pre>

<p>Encontre todos os elementos que têm a classe 'teste' (como faz seu elemento pai)</p>

<pre class="eval"> var teste = document.getElementsByClassName('teste');
 Array.filter( teste, function(elem){
   return Array.indexOf( teste, elem.parentNode ) &gt; -1;
 });
</pre>

<p><span class="comment">XXX escreva-me == Notas == Um método similar existe em &lt;code&gt;Element&lt;/code&gt;</span></p>

<h3 id="Especifica.C3.A7.C3.A3o" name="Especifica.C3.A7.C3.A3o">Especificação</h3>

<p><a class="external" href="http://whatwg.org/specs/web-apps/current-work/#getelementsbyclassname">WHATWG Web Applications 1.0: getElementsByClassName</a></p>

<p><span class="comment">Categorias</span></p>

<p><span class="comment">Interwiki Language Links</span></p>

<p>{{ languages( { "en": "en/DOM/document.getElementsByClassName", "fr": "fr/DOM/document.getElementsByClassName" } ) }}</p>