You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: 2-ui/1-document/06-dom-attributes-and-properties/article.md
+8-12Lines changed: 8 additions & 12 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -8,7 +8,7 @@ Mas o mapeamento entre atributo e propriedade não é de um para um! Nesse capí
8
8
9
9
## Propriedades DOM
10
10
11
-
Nós já vimos propriedades DOM incorporadas. Há várias delas, mas tecnicamente ninguém nos limita, e se não há propriedades suficientes, nós podemos adicionar nossas próprias.
11
+
Nós já vimos propriedades DOM incorporadas. Há várias delas, mas tecnicamente ninguém nos limita, e se não há propriedades suficientes, nós podemos adicionar nossas próprias.
12
12
13
13
Nós do DOM são objetos JavaScript comuns. Nós podemos alterar eles.
14
14
@@ -138,9 +138,9 @@ Observe:
138
138
1.`getAttribute('About')` -- a primeira letra aqui está em maiúsculo, e no HTML está totalmente em minúsculo. Mas isso não importa: os nomes dos atributos não diferenciam maiúsculas de minúsculas.
139
139
2. Nós podemos atribuir qualquer coisa a um atributo, mas se tornará uma string. Então, aqui temos `"123"` como o valor.
140
140
3. Todos os atributos, incluindo os que estão definidos, são visíveis no `outerHTML`.
141
-
4. A coleção `attributes` é iterável e tem todos os atributos do elemento (padrões e não padrões) como objetos com propriedades `name` e `value`.
141
+
4. A coleção `attributes` é iterável e tem todos os atributos do elemento (padrões e não padrões) como objetos com propriedades `name` e `value`.
142
142
143
-
## Sincronização entre propriedade e atributo
143
+
## Sincronização entre propriedade e atributo
144
144
145
145
Quando um campo padrão muda, a propriedade correspondente é automaticamente atualizada, e (com algumas exceções) vice-versa.
146
146
@@ -162,11 +162,7 @@ No exemplo abaixo `id` é modificado como um atributo, e nós podemos ver a prop
162
162
</script>
163
163
```
164
164
165
-
<<<<<<< HEAD
166
165
Mas há algumas exceções, por exemplo, `input.value` sincroniza a partir de atributo -> propriedade, mas o contrário não ocorre:
167
-
=======
168
-
But there are exclusions, for instance `input.value` synchronizes only from attribute -> property, but not back:
169
-
>>>>>>> d78b01e9833009fab534462e05c03cffc51bf0e3
170
166
171
167
```html run
172
168
<input>
@@ -194,7 +190,7 @@ Essa "característica", na verdade, pode ser útil, porque as ações do usuári
194
190
195
191
## Propriedades DOM são tipadas
196
192
197
-
Propriedades DOM nem sempre são strings. Por exemplo, a propriedade `input.checked` (para caixas de seleção) é um booleano:
193
+
Propriedades DOM nem sempre são strings. Por exemplo, a propriedade `input.checked` (para caixas de seleção) é um booleano:
198
194
199
195
```html run
200
196
<inputid="input"type="checkbox"checked> checkbox
@@ -205,7 +201,7 @@ Propriedades DOM nem sempre são strings. Por exemplo, a propriedade `input.chec
205
201
</script>
206
202
```
207
203
208
-
Há outros exemplos. O campo `style` é uma string, mas a propriedade `style` é um objeto:
204
+
Há outros exemplos. O campo `style` é uma string, mas a propriedade `style` é um objeto:
@@ -316,7 +312,7 @@ Para evitar tais conflitos, existem os atributos [data-*](https://html.spec.what
316
312
317
313
**Todos os atributos começando com "data-" são reservados para programadores usarem. Eles estão disponíveis na propriedade `dataset`.
318
314
319
-
Por exemplo, se um `elem` tiver um atributo chamado `"data-about"`, ele estará disponível em `elem.dataset.about`.
315
+
Por exemplo, se um `elem` tiver um atributo chamado `"data-about"`, ele estará disponível em `elem.dataset.about`.
320
316
321
317
Bem assim:
322
318
@@ -385,5 +381,5 @@ Métodos para trabalhar com atributos são:
385
381
386
382
Para a maioria das situações, usar propriedades DOM tem preferência. Nós devemos nos referir a atributos apenas quando propriedades DOM não são cabíveis, quando precisamos de atributos exatos, por exemplo:
387
383
388
-
- Quando precisamos de atributos não padronizados. Mas se começar com `data-`, então devemos usar `dataset`.
389
-
- Quando precisamos ler o valor do HTML "a risca". O valor da propriedade DOM pode ser diferente, por exemplo, o `href` é sempre uma URL completa, e nós talvez queremos o valor "original".
384
+
- Quando precisamos de atributos não padronizados. Mas se começar com `data-`, então devemos usar `dataset`.
385
+
- Quando precisamos ler o valor do HTML "a risca". O valor da propriedade DOM pode ser diferente, por exemplo, o `href` é sempre uma URL completa, e nós talvez queremos o valor "original".
0 commit comments