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
+32-32Lines changed: 32 additions & 32 deletions
Original file line number
Diff line number
Diff line change
@@ -1,76 +1,76 @@
1
-
# Attributes and properties
1
+
# Atributos e propriedades
2
2
3
-
When the browser loads the page, it "reads" (another word: "parses") the HTML and generates DOM objects from it. For element nodes, most standard HTML attributes automatically become properties of DOM objects.
3
+
Quando navegador carrega a página, ele "lê" (outra palavra: "analisa") o HTML e gera objetos DOM a partir dela. Para nós de elementos, a maior parte dos atributos HTML padrão automaticamente se tornam propriedades de objetos DOM.
4
4
5
-
For instance, if the tag is`<body id="page">`, then the DOM object has`body.id="page"`.
5
+
Por exemplo, se a tag é`<body id="page">`, então o objeto DOM tem`body.id="page"`.
6
6
7
-
But the attribute-property mapping is not one-to-one! In this chapter we'll pay attention to separate these two notions, to see how to work with them, when they are the same, and when they are different.
7
+
Mas o mapeamento atributo-propriedade não é de um para um! Nesse capítulo vamos prestar atenção em separar essas duas noções, entender como trabalhar com eles, quando eles são os mesmos e quando eles são diferentes.
8
8
9
-
## DOM properties
9
+
## Propriedades DOM
10
10
11
-
We've already seen built-in DOM properties. There are a lot. But technically no one limits us, and if there aren't enough, we can add our own.
11
+
Nós já vimos propriedades DOM incorporadas. Há várias. Mas tecnicamente ninguém nos limita, e se não há propriedades suficientes, nós podemos adicionar nossas próprias.
12
12
13
-
DOM nodes are regular JavaScript objects. We can alter them.
13
+
Nós DOM são objetos JavaScript. Nós podemos alterar eles.
14
14
15
-
For instance, let's create a new property in`document.body`:
15
+
Por exemplo, vamos criar uma propriedade nova em`document.body`:
16
16
17
17
```js run
18
18
document.body.myData= {
19
19
name:'Caesar',
20
-
title:'Imperator'
20
+
title:'Imperador'
21
21
};
22
22
23
-
alert(document.body.myData.title); //Imperator
23
+
alert(document.body.myData.title); //Imperador
24
24
```
25
25
26
-
We can add a method as well:
26
+
Nós podemos adicionar um método também:
27
27
28
28
```js run
29
29
document.body.sayTagName=function() {
30
30
alert(this.tagName);
31
31
};
32
32
33
-
document.body.sayTagName(); // BODY (the value of "this" in the method is document.body)
33
+
document.body.sayTagName(); // BODY (o valor de "this" no método é document.body)
34
34
```
35
35
36
-
We can also modify built-in prototypes like `Element.prototype`and add new methods to all elements:
36
+
Nós também podemos modificar prototypes incorporados como `Element.prototype`e adicionar novos métodos para todos elements:
37
37
38
38
```js run
39
39
Element.prototype.sayHi=function() {
40
-
alert(`Hello, I'm${this.tagName}`);
40
+
alert(`Olá, eu sou um${this.tagName}`);
41
41
};
42
42
43
-
document.documentElement.sayHi(); //Hello, I'm HTML
44
-
document.body.sayHi(); //Hello, I'm BODY
43
+
document.documentElement.sayHi(); //Olá, eu sou um HTML
44
+
document.body.sayHi(); //Olá, eu sou um BODY
45
45
```
46
46
47
-
So, DOM properties and methods behave just like those of regular JavaScript objects:
47
+
Então, propriedades e métodos do DOM se comportam como qualquer objeto JavaScript:
48
48
49
-
-They can have any value.
50
-
-They are case-sensitive (write`elem.nodeType`, not`elem.NoDeTyPe`).
49
+
-Podem ter qualquer valor.
50
+
-São sensíveis a letras maiúsculas e minúsculas (escreva`elem.nodeType`, não`elem.NoDeTyPe`).
51
51
52
-
## HTML attributes
52
+
## Atributos HTML
53
53
54
-
In HTML, tags may have attributes. When the browser parses the HTML to create DOM objects for tags, it recognizes *standard* attributes and creates DOM properties from them.
54
+
Em HTML, tags podem ter atributos. Quando o navegador analisa o HTML para criar objetos DOM para tags, ele reconhece atributos *padrões* e cria propriedades DOM para eles.
55
55
56
-
So when an element has`id`or another *standard* attribute, the corresponding property gets created. But that doesn't happen if the attribute is non-standard.
56
+
Então quando um elemento tem`id`ou outro atributo *padrão*, a propriedade correspontente é criada. Mas isso não acontece se o atributo não for padrão.
57
57
58
-
For instance:
58
+
Por exemplo:
59
59
```html run
60
60
<bodyid="test"something="non-standard">
61
61
<script>
62
62
alert(document.body.id); // test
63
63
*!*
64
-
//non-standard attribute does not yield a property
64
+
//Atributo não padrão não resulta em uma propriedade
65
65
alert(document.body.something); // undefined
66
66
*/!*
67
67
</script>
68
68
</body>
69
69
```
70
70
71
-
Please note that a standard attribute for one element can be unknown for another one. For instance, `"type"`is standard for`<input>`([HTMLInputElement](https://html.spec.whatwg.org/#htmlinputelement)), but not for`<body>` ([HTMLBodyElement](https://html.spec.whatwg.org/#htmlbodyelement)). Standard attributes are described in the specification for the corresponding element class.
71
+
Observe que um atributo padrão para um elemento pode ser desconhecido para outro elemento. Por exemplo, `"type"`é padrão para`<input>`([HTMLInputElement](https://html.spec.whatwg.org/#htmlinputelement)), mas não para`<body>` ([HTMLBodyElement](https://html.spec.whatwg.org/#htmlbodyelement)). Atributos padrão são descritos na especificação da classe correspondente ao elemento.
72
72
73
-
Here we can see it:
73
+
Aqui nós podemos ver:
74
74
```html run
75
75
<bodyid="body"type="...">
76
76
<inputid="input"type="text">
@@ -83,14 +83,14 @@ Here we can see it:
83
83
</body>
84
84
```
85
85
86
-
So, if an attribute is non-standard, there won't be a DOM-property for it. Is there a way to access such attributes?
86
+
Então, se um atributo não é padrão, não há uma propriedade DOM para ele. Há alguma forma de acessar esses atributos?
87
87
88
-
Sure. All attributes are accessible by using the following methods:
88
+
Claro. Todos atributos são acessíveis usando os seguintes métodos:
89
89
90
-
-`elem.hasAttribute(name)` -- checks for existence.
91
-
-`elem.getAttribute(name)` -- gets the value.
92
-
-`elem.setAttribute(name, value)` -- sets the value.
93
-
-`elem.removeAttribute(name)` -- removes the attribute.
90
+
-`elem.hasAttribute(name)` -- checa a existencia.
91
+
-`elem.getAttribute(name)` -- obtém o valor.
92
+
-`elem.setAttribute(name, value)` -- defined um valor.
93
+
-`elem.removeAttribute(name)` -- remove o atributo.
94
94
95
95
These methods operate exactly with what's written in HTML.
0 commit comments