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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
|
---
title: NodeList
slug: Web/API/NodeList
tags:
- API
- DOM
- Interfaz
- NodeList
translation_of: Web/API/NodeList
---
<div>{{APIRef("DOM")}}</div>
<p>Los objetos <strong><code>NodeList</code></strong> son colecciones de nodos como los devueltos por propiedades como {{domxref ("Node.childNodes")}} y el método {{domxref ("document.querySelectorAll ()")}}..</p>
<div class="note">
<p>Aunque <code>NodeList</code> no es un <code>Array</code>, es posible iterar sobre él utilizando <code>forEach()</code>. También puede convertirse a un <code>Array</code> usando <code>Array.from</code>.</p>
<p>Sin embargo, algunos navegadores antiguos no han implementado <code>NodeList.forEach()</code> ni <code>Array.from()</code>. Pero esas limitaciones pueden eludirse utilizando {{jsxref("Array.forEach()", "Array.prototype.forEach()")}} (más en este documento).</p>
</div>
<p>En algunos casos, <code>NodeList</code> es una colección <em>en vivo</em>, lo que significa que los cambios en el DOM se reflejan en la colección. Por ejemplo, {{domxref ("Node.childNodes")}} está en vivo:</p>
<pre class="brush: js">var parent = document.getElementById('parent');
var child_nodes = parent.childNodes;
console.log(child_nodes.length); // asumamos "2"
parent.appendChild(document.createElement('div'));
console.log(child_nodes.length); // debería imprimir "3"
</pre>
<p>En otros casos, <code>NodeList</code> es una colección estática, lo que significa que cualquier cambio posterior en el DOM no afecta el contenido de la colección. {{domxref ("document.querySelectorAll ()")}} devuelve un <code>NodeList</code> estático.</p>
<p>Es bueno tener en cuenta esta distinción cuando elige cómo iterar sobre los elementos en <code>NodeList</code>, y cómo guarda en caché la longitud de la lista en particular.</p>
<h2 id="Propiedades">Propiedades</h2>
<dl>
<dt>{{domxref("NodeList.length")}}</dt>
<dd>El número de nodos en la <code>NodeList</code>.</dd>
</dl>
<h2 id="Métodos">Métodos</h2>
<dl>
<dt>{{domxref("NodeList.item()")}}</dt>
</dl>
<dl>
<dd>Devuelve un elemento en la lista por su índice, o <code>null</code> si el índice está fuera de límites; se puede utilizar como una alternativa para acceder simplemente a <code>nodeList[idx]</code> (que en cambio devuelve indefinido cuando idx está fuera de límites).</dd>
<dt>{{domxref("NodeList.entries()")}}</dt>
<dd>Devuelve un {{jsxref ("Iteration_protocols", "iterator")}} que permite pasar por todos los pares clave / valor contenidos en este objeto.</dd>
<dt>{{domxref("NodeList.forEach()")}}</dt>
<dd>Ejecuta una función proporcionada una vez por elemento <code>NodeList</code>.</dd>
<dt>{{domxref("NodeList.keys()")}}</dt>
<dd>Devuelve un {{jsxref ("Iteration_protocols", "iterator")}} que permite pasar por todas las claves de los pares clave / valor contenidos en este objeto.</dd>
<dt>{{domxref("NodeList.values()")}}</dt>
<dd>Devuelve un {{jsxref ("Iteration_protocols", "iterator")}} que permite recorrer todos los valores de los pares clave / valor contenidos en este objeto.</dd>
</dl>
<h2 id="Ejemplo">Ejemplo</h2>
<p>Es posible iterar sobre los items en un <code>NodeList</code> usando:</p>
<pre class="brush: js">for (var i = 0; i < myNodeList.length; i++) {
var item = myNodeList[i]; // No es necesario llamar a myNodeList.item(i) en JavaScript
}
</pre>
<p>No se sienta tentado a <code><a href="/en-US/docs/JavaScript/Reference/Statements/for...in" title="JavaScript/ Reference/Statements/for...in">for...in</a></code> or <code><a href="/en-US/docs/JavaScript/Reference/Statements/for_each...in" title="JavaScript/ Reference/Statements/for each...in">for each...in</a></code> para enumerar los elementos en la lista, ya que eso también enumerará la longitud y las propiedades del elemento de <code>NodeList</code> y causará errores si su secuencia de comandos asume que solo tiene que tratar con objetos {{domxref ("element")}}. Además, <code>for..in</code> no garantiza visitar las propiedades en ningún orden en particular.</p>
<p>Los bucles <code><a href="/en-US/docs/JavaScript/Reference/Statements/for...of" title="/en-US/docs/JavaScript/Reference/Statements/for...of">for...of</a></code> harán un bucle sobre los objetos <code>NodeList</code> correctamente:</p>
<pre class="brush: js">var list = document.querySelectorAll( 'input[type=checkbox]' );
for (var item of list) {
item.checked = true;
}
</pre>
<p>Los navegadores recientes también son compatibles con los métodos de iteración, {{domxref("NodeList.forEach()", "forEach()")}}, así como {{domxref("NodeList.entries()", "entries()")}}, {{domxref("NodeList.values()", "values()")}}, y {{domxref("NodeList.keys()", "keys()")}}</p>
<p>También hay una forma compatible con Internet Explorer de usar {{jsxref ("Array.forEach ()", "Array.prototype.forEach")}} para la iteración.</p>
<pre class="brush: js">var list = document.querySelectorAll( 'input[type=checkbox]' );
Array.prototype.forEach.call(list, function (item) {
item.checked = true;
});</pre>
<h2 id="Especificaciones" name="Especificaciones">Especificaciones</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', '#interface-nodelist', 'NodeList')}}</td>
<td>{{ Spec2('DOM WHATWG') }}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName('DOM3 Core', 'core.html#ID-536297177', 'NodeList')}}</td>
<td>{{ Spec2('DOM3 Core') }}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName('DOM2 Core', 'core.html#ID-536297177', 'NodeList')}}</td>
<td>{{ Spec2('DOM2 Core') }}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName('DOM1', 'level-one-core.html#ID-536297177', 'NodeList')}}</td>
<td>{{ Spec2('DOM1') }}</td>
<td>Definición inicial.</td>
</tr>
</tbody>
</table>
<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
<p>{{Compat("api.NodeList")}}</p>
|
