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
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
|
---
title: NodeList
slug: Web/API/NodeList
tags:
- API
- DOM
- Interface
- NodeList
translation_of: Web/API/NodeList
---
<div>{{APIRef("DOM")}}</div>
<p>Objetos <strong><code>NodeList</code></strong> são coleções de nodos semelhantes aos objetos retornados pelos métodos {{domxref("Node.childNodes")}} e {{domxref("document.querySelectorAll()")}}.</p>
<div class="note">
<p>Apesar de <code>NodeList</code> não ser um <code>Array</code>, é possível ser iterada usando o método <code>forEach()</code>. Muitos navegadores antigos ainda não implementaram este método.</p>
</div>
<p>Em alguns casos, <code>NodeList</code> é uma <em>coleção viva</em>, ou seja, toda alteração feita no {{ Glossary("DOM") }} reflete nos elementos da coleção. Por exemplo, {{ domxref("Node.childNodes") }} é uma coleção viva:</p>
<pre class="brush: js">var parent = document.getElementById('parent');
var child_nodes = parent.childNodes;
console.log(child_nodes.length); // let's assume "2"
parent.appendChild(document.createElement('div'));
console.log(child_nodes.length); // should output "3"
</pre>
<p>Já em outros casos <code>NodeList</code> é um <em>coleção estática</em>, significando que toda alteração subsequente ao {{ Glossary("DOM") }} não afeta o conteúdo da coleção. {{domxref("document.querySelectorAll()")}} é um exemplo de método que retorna uma <code>NodeList</code> estática.</p>
<p>É aconselhável lembrar dessa distinção quando for escolher como iterar sobre os itens de uma <code>NodeList</code>, e como você faz o <em>cache</em> do tamanho dessa lista.</p>
<h2 id="Propriedades">Propriedades</h2>
<dl>
<dt>{{domxref("NodeList.length")}}</dt>
<dd>A quantidade de nodos na <code>NodeList</code>.</dd>
</dl>
<h2 id="Métodos">Métodos</h2>
<dl>
<dt>{{domxref("NodeList.item()")}}</dt>
<dd>Retorna um item da lista pelo índice, ou <code>null</code> se o índice for inválido; pode ser usado como uma alternativa a <code>nodeList[idx]</code> (que retorna <code>undefined</code> quando <code>idx</code> é inválido).</dd>
<dt>{{domxref("NodeList.entries()")}}</dt>
<dd>Retorna um {{jsxref("Iteration_protocols","iterador")}} que permite passar por todos os pares chave/valor contidos no objeto.</dd>
<dt>{{domxref("NodeList.forEach()")}}</dt>
<dd>Executa uma função recebida uma vez para cada elemento no <code>NodeList</code>.</dd>
<dt>{{domxref("NodeList.keys()")}}</dt>
<dd>Retorna um {{jsxref("Iteration_protocols","iterador")}} que permite passar por todas as chaves dos pares chave/valor contidos no objeto.</dd>
<dt>{{domxref("NodeList.values()")}}</dt>
<dd>Retorna um {{jsxref("Iteration_protocols","iterador")}} que permite passar por todos os valores dos pares chave/valor contidos no objeto.</dd>
</dl>
<h2 id="Exemplo">Exemplo</h2>
<p>É possivel iterar sobre os items de um <code>NodeList</code> usando:</p>
<pre class="brush: js">for (var i = 0; i < myNodeList.length; ++i) {
var item = myNodeList[i]; // Calling myNodeList.item(i) isn't necessary in JavaScript
}
</pre>
<p>Não caia na tentação de usar <a href="/pt-BR/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a> ou <a href="/pt-BR/docs/Web/JavaScript/Reference/Statements/for_each...in">for each...in</a> para enumerar os items de uma lista, já que também serão enumeradas as propriedades <code>length</code> e <code>item</code> da <code>NodeList</code>, o que causará erros se o seu script assumir que processará apenas objetos {{ domxref("element") }}. Não esquecendo que <code>for..in</code> <strong>não</strong> garante a iteração nas propriedades de forma ordenada.</p>
<p><code><a href="/pt-BR/docs/JavaScript/Reference/Statements/for...of" title="/en-US/docs/JavaScript/Reference/Statements/for...of">for...of</a></code> iterará sobre os objetos da <code>NodeList</code> de maneira correta:</p>
<pre class="brush: js">var list = document.querySelectorAll( 'input[type=checkbox]' );
for (var item of list) {
item.checked = true;
}</pre>
<p>Navegadores modernos suportam métodos de iteração, {{ domxref("NodeList.forEach()", "forEach()") }}, bem como {{ domxref("NodeList.entries()", "entries()") }}, {{ domxref("NodeList.values()", "values()") }}, e {{ domxref("NodeList.keys()", "keys()") }}</p>
<p>Há também um jeito compatível com o Internet Explorer de usar {{ jsxref("Array.forEach()", "Array.prototype.forEach") }} para iteração.</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="Specifications" name="Specifications">NodeList prototype</h2>
<p>Você também pode adicionar protótipos para <code>NodeList</code>:</p>
<pre class="brush: js">var elements = document.querySelectorAll(".suggestions");
NodeList.prototype.addEventListener = function(event, func) {
this.forEach(function(content, item) {
content.addEventListener(event, func);
});
}
function log() {
console.log(this, " was clicked");
}
elements.addEventListener("click", log);
//or
elements.addEventListener("click", function() {
console.log(this, " awas clicked");
});
// output from both will be <em>element </em>was clicked the element would be HTML Element</pre>
<p>Para mais informações sobre forEach veja {{ jsxref("Array.forEach()", "Array.prototype.forEach") }}.</p>
<h2 id="Specifications" name="Specifications">Especificações</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('DOM WHATWG', '#interface-nodelist', 'NodeList')}}</td>
<td>{{ Spec2('DOM WHATWG') }}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName('DOM4', '#interface-nodelist', 'NodeList')}}</td>
<td>{{ Spec2('DOM4') }}</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>Initial definition.</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility">Compatibilidade com navegadores</h2>
<p>{{Compat("api.NodeList")}}</p>
<div id="compat-desktop"> </div>
<div id="compat-mobile"> </div>
|
