---
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>&lt;form&gt;</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>