initial commit

1 files changed, 155 insertions, 0 deletions

diff --git a/files/pt-br/web/api/nodelist/index.html b/files/pt-br/web/api/nodelist/index.html
new file mode 100644
index 0000000000..d20d2978a9
--- /dev/null
+++ b/files/pt-br/web/api/nodelist/index.html
@@ -0,0 +1,155 @@
+---
+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 &lt; 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="Compatibilidade_nos_navegadores">Compatibilidade nos navegadores</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.NodeList")}}</p>
+
+<div id="compat-desktop"> </div>
+
+<div id="compat-mobile"> </div>