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
87
88
89
90
91
92
93
94
95
96
97
98
99
|
---
title: HTMLCollection
slug: Web/API/HTMLCollection
tags:
- API
- DOM
- HTML DOM
- HTMLCollection
- Interfaz
- Lista de elementos
- Referencia
- Referência DOM
translation_of: Web/API/HTMLCollection
---
<p>{{APIRef("HTML DOM")}}</p>
<p>La interfaz <strong><code>HTMLCollection</code></strong> representa una colección genérica (objeto tipo array similar a arguments) de elementos (en orden de documento) y ofrece métodos y propiedades para seleccionarlos de la lista.</p>
<div class="note"><strong>Nota: </strong>Esta interfaz se llama <code>HTMLCollection</code> por razones históricas (antes del DOM moderno, las colecciones que implementaban esta interfaz sólo podían tener elementos HTML como sus ítems).</div>
<p>Una <code>HTMLCollection</code> en el DOM de HTML está viva; se actualiza automáticamente cuando el documento subyacente cambia.</p>
<h2 id="Propiedades">Propiedades</h2>
<dl>
<dt>{{domxref("HTMLCollection.length")}} {{readonlyInline}}</dt>
<dd>Devuelve el numero de ítems en la colección.</dd>
</dl>
<h2 id="Métodos">Métodos</h2>
<dl>
<dt>{{domxref("HTMLCollection.item()")}}</dt>
<dd><span id="result_box" lang="es"><span class="hps">Devuelve el</span> <span class="hps">nodo específicado en el índice en base cero dentro de</span> <span class="hps">la lista.</span> <span class="hps">Devuelve</span> <span class="hps"><code>null</code> si</span> <span class="hps">el índice está fuera</span> <span class="hps">de rango.</span></span></dd>
<dt>{{domxref("HTMLCollection.namedItem()")}}</dt>
<dd><span id="result_box" lang="es"><span class="hps">Devuelve el</span> <span class="hps">nodo específico</span> <span class="hps">cuyo ID</span><span class="hps"> o</span><span>,</span> <span class="hps">en último caso</span><span>,</span> cuyo <span class="hps">nombre coincide con</span> <span class="hps">la cadena especificada</span> <span class="hps">por</span></span> <code>name</code><span lang="es"><span class="hps">.</span> La c<span class="hps">oincidencia</span> <span class="hps">por nombre</span> <span class="hps">sólo se hace</span> <span class="hps">como último recurso</span><span>,</span> <span class="hps">sólo en</span> <span class="hps">HTML,</span> <span class="hps">y sólo si el</span> <span class="hps">elemento referenciado</span> <span class="hps">soporta</span> <span class="hps">el atributo </span></span><code>name</code><span lang="es"><span>.</span> <span class="hps">Devuelve <code>null</code></span> <span class="hps">si no existe ningún</span> <span class="hps">nodo</span> <span class="hps">con el nombre</span> <span class="hps">indicado.</span></span></dd>
</dl>
<h2 id="Uso_en_JavaScript">Uso en JavaScript</h2>
<p><span id="result_box" lang="es"><code><span class="hps">HTMLCollection</span></code></span> también<span lang="es"><span class="hps"> expone a</span> <span class="hps">sus miembros</span> <span class="hps">directamente como</span> <span class="hps">propiedades tanto por</span> </span>name <span lang="es">como por<span class="hps"> </span></span>index<span lang="es"><span>. Los</span> <span class="hps">IDS de</span> <span class="hps">HTML</span> <span class="hps">deben contener </span><code><span>:</span></code> <span class="hps">y </span><code><span>.</span></code> <span class="hps">como caracteres</span> <span class="hps">válidos</span><span>, los cuales necesitan del uso de corchetes para acceder a sus propiedades</span><span>.</span> <span class="hps">Actualmente</span> las <span class="hps">HTMLCollections</span> <span class="hps">no reconocen</span> <span class="hps">los IDS</span> <span class="hps">puramente</span> <span class="hps">numéricos</span><span>, lo que causaría</span> <span class="hps">conflicto con el</span> <span class="hps">acceso</span> al estilo array<span class="hps">,</span> <span class="hps">aunque</span> <span class="hps">HTML5</span> <span class="hps">sí permite</span> <span class="hps">estos.</span></span></p>
<p>Por ejemplo, suponiendo que hay un elemento <code><form></code> en el documento y que su <code>id</code> es<font face="Open Sans, Arial, sans-serif"> </font><code>"myForm"</code>:</p>
<pre class="brush:js">var elem1, elem2;
// document.forms es un HTMLCollection
elem1 = document.forms[0];
elem2 = document.forms.item(0);
alert(elem1 === elem2); // muestra: "true"
elem1 = document.forms.myForm;
elem2 = document.forms.namedItem("myForm");
alert(elem1 === elem2); // muestra: "true"
elem1 = document.forms["named.item.with.periods"];</pre>
<h2 id="Especificación">Especificación</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Especificación</th>
<th scope="col">Estado</th>
<th scope="col">Comentario</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('DOM WHATWG', '#htmlcollection', 'HTMLCollection')}}</td>
<td>{{ Spec2('DOM WHATWG') }}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName('DOM2 HTML', 'html.html#ID-75708506', 'HTMLCollection')}}</td>
<td>{{ Spec2('DOM2 HTML') }}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName('DOM1', 'level-one-html.html#ID-75708506', 'HTMLCollection')}}</td>
<td>{{ Spec2('DOM1') }}</td>
<td>Definición inicial.</td>
</tr>
</tbody>
</table>
<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
<p>{{Compat("api.HTMLCollection")}}</p>
<h2 id="Vea_también">Vea también</h2>
<ul>
<li>{{domxref("NodeList")}}</li>
<li>{{domxref("HTMLFormControlsCollection")}}, {{domxref("HTMLOptionsCollection")}}</li>
</ul>
|
