1 files changed, 108 insertions, 0 deletions
diff --git a/files/pt-br/web/api/element/getelementsbyclassname/index.html b/files/pt-br/web/api/element/getelementsbyclassname/index.html
new file mode 100644
index 0000000000..2660d0009b
--- /dev/null
+++ b/files/pt-br/web/api/element/getelementsbyclassname/index.html
@@ -0,0 +1,108 @@
+---
+title: Element.getElementsByClassName()
+slug: Web/API/Element/getElementsByClassName
+translation_of: Web/API/Element/getElementsByClassName
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><span class="seoSummary">O método <code><strong>getElementsByClassName()</strong></code> da interface {{domxref("Element")}} retorna um {{domxref("HTMLCollection")}} atualizado simultaneamente que contém todos os elementos descendentes da classe ou das classes especificadas.</span></p>
+
+<p>O método {{domxref("Document.getElementsByClassName", "getElementsByClassName()")}} da interface {{domxref("Document")}} funciona da mesma forma, exceto que atua em todo o documento, começando da raíz.</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox"><var>var <em>elements</em></var> = <em>element</em>.getElementsByClassName(<em>names</em>);</pre>
+
+<h3 id="Parâmetros">Parâmetros</h3>
+
+<dl>
+ <dt><code>names</code></dt>
+ <dd>Uma {{domxref("DOMString")}} contendo um ou mais nomes de classes separados por espaço em branco.</dd>
+</dl>
+
+<h3 id="Valor_de_retorno">Valor de retorno</h3>
+
+<p>Um {{domxref("HTMLCollection")}} que contém uma lista de elementos atualizada em tempo real com todos os elementos que são membros das classes especificadas em <code>names</code>.</p>
+
+<h2 id="Notas_de_uso">Notas de uso</h2>
+
+<p>Habitualmente, o conjunto de elementos retornado será atualizado simultaneamente com as mudanças feitas, refletindo no estado atual da árvore DOM, no elemento em que a função foi chamada. Assim que novos elementos que satisfazem as classes contidas em <code>names</code> são adicionados na subárvore, eles imediatamente aparecem no conjunto de elementos. Em um exemplo similar, se um elemento existente que não satisfaz nenhuma classe contida em <code>names</code> tem as suas classes ajustadas para que satisfaça, ele irá instantaneamente ser adicionado ao conjunto de elementos.</p>
+
+<p>O oposto disso também acontece; os elementos que não satisfazerem mais as classes contidas em <code>name</code> serão removidos instantaneamente do conjunto.</p>
+
+<div class="note">
+<p>No modo <a href="/en-US/docs/Web/HTML/Quirks_Mode_and_Standards_Mode">quirks</a>, o nome das classes são comparadas da forma case-insensitive. Caso contrário, considere case sensitive.</p>
+</div>
+
+<h2 id="Exemplos">Exemplos</h2>
+
+<h3 id="Usando_uma_única_classe">Usando uma única classe</h3>
+
+<p>Para procurarmos elementos que incluem uma classe específica, nós apenas informamos o nome da classe ao chamar <code>getElementsByClassName()</code>:</p>
+
+<pre class="brush: js">element.getElementsByClassName('test');</pre>
+
+<p>Esse exemplo retorna todos os elementos que possuem a classe <code>test</code>, e que também são filhos do elemento que possui o <code>id</code> com valor <code>main</code>:</p>
+
+<pre class="brush: js">document.getElementById('main').getElementsByClassName('test');</pre>
+
+<h3 id="Usando_várias_classes">Usando várias classes</h3>
+
+<p>Para retornar elementos que incluem as classes <code>red</code> and <code>test</code>:</p>
+
+<pre class="brush: js">element.getElementsByClassName('red test');</pre>
+
+<h3 id="Examinando_os_resultados">Examinando os resultados</h3>
+
+<p>You can use either the {{domxref("HTMLCollection.item", "item()")}} method on the returned <code>HTMLCollection</code> or standard array syntax to examine individual elements in the collection. However<u><strong> the following code will not work</strong></u> as one might expect because <code>"matches" </code>will change as soon as any <code>"colorbox"</code> class is removed.</p>
+
+<pre class="brush: js">var matches = element.getElementsByClassName('colorbox');
+
+for (var i=0; i&lt;matches.length; i++) {
+  matches[i].classList.remove('colorbox');
+  matches.item(i).classList.add('hueframe');
+}
+</pre>
+
+<p>Instead, use another method, such as:</p>
+
+<pre class="brush: js">var matches = element.getElementsByClassName('colorbox');
+
+while (matches.length &gt; 0) {
+  matches.item(0).classList.add('hueframe');
+  matches[0].classList.remove('colorbox');
+}</pre>
+
+<p>This code finds descendant elements with the <code>"colorbox"</code> class, adds the class <code>"hueframe"</code>, by calling <code>item(0), </code>then removes <code>"colorbox" </code>(using array notation). Another element (if any are left) will then become <code>item(0)</code>.</p>
+
+<h3 id="Filtering_the_results_using_array_methods">Filtering the results using array methods</h3>
+
+<p>We can also use methods of {{jsxref("Array.prototype")}} on any {{ domxref("HTMLCollection") }} by passing the {{domxref("HTMLCollection")}} as the method's <code>this</code> value. Here we'll find all {{HTMLElement("div")}} elements that have a class of <code>test</code>:</p>
+
+<pre class="brush: js">var testElements = document.getElementsByClassName('test');
+var testDivs = Array.prototype.filter.call(testElements, function(testElement) {
+  return testElement.nodeName === 'DIV';
+});</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-element-getelementsbyclassname', 'Element.getElementsByClassName()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.Element.getElementsByClassName")}}</p>