diff options
Diffstat (limited to 'files/pt-br/web/api/element/attributes/index.html')
| -rw-r--r-- | files/pt-br/web/api/element/attributes/index.html | 166 |
1 files changed, 166 insertions, 0 deletions
diff --git a/files/pt-br/web/api/element/attributes/index.html b/files/pt-br/web/api/element/attributes/index.html new file mode 100644 index 0000000000..b5888e0f04 --- /dev/null +++ b/files/pt-br/web/api/element/attributes/index.html @@ -0,0 +1,166 @@ +--- +title: Element.attributes +slug: Web/API/Element/attributes +tags: + - API + - DOM + - Element + - Elemento + - Property + - Propriedade + - Reference + - Referencia +translation_of: Web/API/Element/attributes +--- +<p>{{ APIRef("DOM") }}</p> + +<p>A propriedade <strong><code>Element.attributes</code></strong> retorna uma coleção de todos os atributos registrados para um nó especificado. É um {{domxref("NamedNodeMap")}}, e não um <code>Array</code>, então não há os métodos de um {{jsxref("Array")}} e os nós indexados {{domxref("Attr")}} podem ser diferentes entre os navegadores. Para ser mais específico, <code>attributes</code> é um par de chave/valor de strings que representa qualquer informação relacionada ao atributo.</p> + +<h2 id="Syntax" name="Syntax">Sintaxe</h2> + +<pre class="syntaxbox">var <em>attr</em> =<em> element</em>.attributes; +</pre> + +<h2 id="Example" name="Example">Exemplo</h2> + +<h3 id="Exemplos_básicos">Exemplos básicos</h3> + +<pre class="brush: js">// Obtem o primeiro elemento <p> no documento +var para = document.getElementsByTagName("p")[0]; +var atts = para.attributes;</pre> + +<h3 id="Notes" name="Notes">Listando os atributos dos elementos</h3> + +<p>Indexadores numéricos são úteis para percorrer através de todos os atributos de um elemento.<br> + O exemplo a seguir percorre através dos nós dos atributos do elemento no documento que tenha o id de "p1", e imprime o valor de cada atributo.</p> + +<pre class="brush: html"><!DOCTYPE html> + +<html> + + <head> + <title>Exemplo com atributos</title> + <script type="text/javascript"> + function listAttributes() { + var paragraph = document.getElementById("paragraph"); + var result = document.getElementById("result"); + + // Antes, vamos verificar se o paragrafo tem algum atributo + if (paragraph.hasAttributes()) { + var attrs = paragraph.attributes; + var output = ""; + for(var i = attrs.length - 1; i >= 0; i--) { + output += attrs[i].name + "->" + attrs[i].value; + } + result.value = output; + } else { + result.value = "Nenhum atributo para mostrar"; + } + } + </script> + </head> + +<body> + <p id="paragraph" style="color: green;">Paragrafo de exemplo</p> + <form action=""> + <p> + <input type="button" value="Mostra o nome e o valor do atributo" + onclick="listAttributes();"> + <input id="result" type="text" value=""> + </p> + </form> +</body> +</html></pre> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-element-attributes', 'Element.attributes')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Da {{SpecName('DOM3 Core')}}, movido de {{domxref("Node")}} para {{domxref("Element")}}</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core', 'core.html#ID-84CF096', 'Element.attributes')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>Nenhuma alteração a partir da {{SpecName('DOM2 Core')}}</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Core', 'core.html#ID-84CF096', 'Element.attributes')}}</td> + <td>{{Spec2('DOM2 Core')}}</td> + <td>Nenhuma alteração a partir da {{SpecName('DOM1')}}</td> + </tr> + <tr> + <td>{{SpecName('DOM1', 'level-one-core.html#ID-84CF096', 'Element.attributes')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>Definição inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_entre_os_navegadores">Compatibilidade entre os navegadores</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funcionalidade</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }} [1]</td> + <td>6.0 [2]</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funcionalidade</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }} [1]</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Antes do Firefox 22, este atributo foi implementado na interface {{domxref("Node")}} (herdada por {{domxref("Element")}}). foi movido para esta interface para obedecer a especificação e o uso em outros navegadores.</p> + +<p>[2] Internet Explorer 5.5 retorna um map contendo os valores ao invés dos objetos do atributo.</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{domxref("NamedNodeMap")}}, a interface do objeto retornado</li> + <li>Considerações sobre a compatibilidade entre os navegadores: em <a class="external" href="http://www.quirksmode.org/dom/w3c_core.html#attributes" title="http://www.quirksmode.org/dom/w3c_core.html#attributes">quirksmode</a></li> +</ul> |