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
124
125
126
127
128
129
130
131
132
|
---
title: NodeList.prototype.forEach()
slug: Web/API/NodeList/forEach
tags:
- DOM
- Iterable
- Métodos
- NodeList
- Referencia
- Web
translation_of: Web/API/NodeList/forEach
---
<p>{{APIRef("DOM")}}</p>
<p>El método<strong><code>forEach()</code></strong> de la interfase{{domxref("NodeList")}} llama a la función callback proporcionada como parámetro una vez para cadapar de valores en la lista, en el orden en que se insertaron.</p>
<h2 id="Syntax">Syntax</h2>
<pre class="syntaxbox"><em>nodeList.</em>forEach<em>(callback[, thisArg]);</em>
</pre>
<h3 id="Parámetros">Parámetros</h3>
<dl>
<dt><code>callback</code></dt>
<dd>Función a ser ejecutada paracada elemento, tomando eventualmente 3 argumentos:
<dl>
<dt><em><code>currentValue</code></em></dt>
<dd>El valor que esta siendo procesado en la lista de nodos.</dd>
<dt><code><em>currentIndex</em></code></dt>
<dd>El índice del elemento que esta siendo procesado en la lista de nodos.</dd>
<dt><em><code>listObj</code></em></dt>
<dd>El objeto NodeList al que se está aplicando el método<code>forEach()</code>.</dd>
</dl>
</dd>
<dt><code>thisArg</code><code> {{Optional_inline}}</code></dt>
<dd>Valor a ser usado como {{jsxref("this")}} al ejecutar<code>callback</code>.</dd>
</dl>
<h3 id="Valor_Retornado">Valor Retornado</h3>
<p>{{jsxref('undefined')}}.</p>
<h2 id="Excepciones">Excepciones</h2>
<p><em>Ninguna</em>.</p>
<h2 id="Ejemplo">Ejemplo</h2>
<pre class="brush: js;highlight:[6]">var nodo = document.createElement("div");
var infante1 = document.createElement("p");
var infante2 = document.createTextNode("hey");
var infante3 = document.createElement("span");
nodo.appendChild(infante1);
nodo.appendChild(infante2);
nodo.appendChild(infante3);
var list = nodo.childNodes;
list.forEach(
function(currentValue, currentIndex, listObj) {
console.log(currentValue + ', ' + currentIndex + ', ' + this);
},
'miEsteArg'
);</pre>
<p>resulta en:</p>
<pre>[object HTMLParagraphElement], 0, miEsteArg
[object Text], 1, miEsteArg
[object HTMLSpanElement], 2, miEsteArg</pre>
<h2 id="Polyfill">Polyfill</h2>
<p>Este {{Glossary("Polyfill","polyfill")}} le da compatibilidad a todos los navegadores que soportan <a href="https://caniuse.com/#search=es5">ES5</a>:</p>
<pre class="brush: js">if (window.NodeList && !NodeList.prototype.forEach) {
NodeList.prototype.forEach = function (callback, thisArg) {
thisArg = thisArg || window;
for (var i = 0; i < this.length; i++) {
callback.call(thisArg, this[i], i, this);
}
};
}</pre>
<p>ó</p>
<pre class="brush: js">if (window.NodeList && !NodeList.prototype.forEach) {
NodeList.prototype.forEach = Array.prototype.forEach;
}</pre>
<p>El comportamiento ateriror esta implementado en muchos navegadores. NodeList.prototype.forEach (Chrome, Firefox for example).</p>
<h2 id="Especificaciones">Especificaciones</h2>
<p>Especificación</p>
<table class="standard-table">
<thead>
<tr>
<th scope="col"></th>
<th scope="col">Status</th>
<th scope="col">Comentarios</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('DOM WHATWG', '#interface-nodelist', 'NodeList')}}</td>
<td>{{ Spec2('DOM WHATWG') }}</td>
<td>Define<code>NodeList</code> como<code><Nodo>iterable</code></td>
</tr>
<tr>
<td>{{SpecName("WebIDL", "#es-forEach", "forEach")}}</td>
<td>{{Spec2("WebIDL")}}</td>
<td>Define<code>forEach</code>en declaraciones<code>iterables</code></td>
</tr>
</tbody>
</table>
<h2 id="Compatibilidad_en_Navegadores">Compatibilidad en Navegadores</h2>
<p>{{Compat("api.NodeList.forEach")}}</p>
<h2 id="Ver_también">Ver también</h2>
<ul>
<li>{{domxref("Node")}}</li>
<li>{{domxref("NodeList")}}</li>
</ul>
|
