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
152
153
154
155
156
157
158
159
160
161
162
163
164
165
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="Browser_compatibility">Compatibilidade com 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>
|
