blob: e876b5d4c3f5ff1e4d5a42eeaccf9675e27d441a (
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
|
---
title: Element.getElementsByClassName()
slug: Web/API/Element/getElementsByClassName
translation_of: Web/API/Element/getElementsByClassName
---
<p>{{APIRef("DOM")}}</p>
<p>El método <strong><code>Element.getElementsByClassName()</code></strong> retorna una {{domxref("HTMLCollection")}} "viva" conteniendo todos los elementos hijos que tienen todos los nombres de clase dados. Cuando se llama en el objeto document, se realiza la búsqueda en el documento completo, incluyendo el nodo raíz.</p>
<p>De forma similar, el método {{domxref("Document.getElementsByClassName", "Document.getElementsByClassName()")}} actúa en todo el documento; retornará los elementos que sean descendientes del documento raiz especificado que tengan los nombres de clase dados.</p>
<h2 id="Sintaxis">Sintaxis</h2>
<pre class="syntaxbox"><var>var <em>elements</em></var> = <em>element</em>.getElementsByClassName(<em>names</em>);</pre>
<ul>
<li><em><var>elements</var></em> es una {{ domxref("HTMLCollection") }} "viva" de los elementos encontrados.</li>
<li><em><var>names</var></em> es una cadena representando la lista de nombres de clase que deben concordar; los nombres de clase está separados por espacios en blanco.</li>
<li><em>element</em> es cualquier {{domxref("Element")}} de un documento.</li>
</ul>
<h2 id="Ejemplo">Ejemplo</h2>
<p>Obtiene todos los elementos que tienen una clase <code>test</code>:</p>
<pre class="brush: js">element.getElementsByClassName('test');</pre>
<p>Obtiene todos los elementos que tienen tanto la clase <code>red</code> como <code>test</code>:</p>
<pre class="brush: js">element.getElementsByClassName('red test');</pre>
<p>Obtiene todos los elementos que tienen la clase of <code>test</code>, dentro de un elemento que tiene el <code>id</code> <code>main</code>:</p>
<pre class="brush: js">document.getElementById('main').getElementsByClassName('test');</pre>
<p>Podemos también usar métodos de {{jsxref("Array.prototype")}} en cualquier {{ domxref("HTMLCollection") }} pasando <code><var>el HTMLCollection</var></code> como el valor <var>this</var> del método. Aquí encontramos todos los elementos {{HTMLElement("div")}} que tienen una clase <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="Especificaciones">Especificaciones</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Especificación</th>
<th scope="col">Estado</th>
<th scope="col">Observaciones</th>
</tr>
<tr>
<td>{{SpecName('DOM WHATWG', '#dom-element-getelementsbyclassname', 'Element.getElementsByClassName()')}}</td>
<td>{{Spec2('DOM WHATWG')}}</td>
<td>Definición inicial</td>
</tr>
</tbody>
</table>
<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
{{Compat("api.Element.getElementsByClassName")}}
|
