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
+19-19Lines changed: 19 additions & 19 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -4,11 +4,11 @@ Quando il browser carica una pagina, "legge" (in altre parole: "analizza") l'HTM
4
4
5
5
Ad esempio, se il tag è `<body id="page">`, allora l'oggetto DOM ha `body.id="page"`.
6
6
7
-
Ma la mappatura attributo-proprietà non va di pari passo! In questo capitolo faremo attenzione a separare queste due nozioni, vedremo come lavorare con esse, quando sono la stessa cosa e quando invece sono differenti.
7
+
Ma la mappatura attributo-proprietà non è uno a uno! In questo capitolo faremo attenzione a separare queste due nozioni, vedremo come lavorare con esse, quando sono la stessa cosa e quando invece sono differenti.
8
8
9
9
## Proprietà del DOM
10
10
11
-
Abbiamo già visto proprietà integrate del DOM. Ce ne sono molte. Ma tecnicamente nessuna di esse ci limita, e se non ce ne sono abbastanza, possiamo aggiungerne.
11
+
Abbiamo già visto proprietà integrate del DOM. Ce ne sono molte. Ma tecnicamente nessuna di esse ci limita, e se non ci sono sufficienti, possiamo aggiungerne.
12
12
13
13
I nodi del DOM sono regolari oggetti JavaScript. Possiamo modificarli.
14
14
@@ -51,9 +51,9 @@ Quindi, le proprietà e i metodi del DOM si comportano come regolari oggetti Jav
51
51
52
52
## Attributi HTML
53
53
54
-
In HTML, i tag possono avere attributi. Quando il browser analizza l'HTML per creare oggetti DOM per i tag, riconosce gli attributi *standart* e crea proprietà del DOM a partire da essi.
54
+
In HTML, i tag possono avere attributi. Quando il browser analizza l'HTML per creare gli oggetti DOM corrispondenti, riconosce gli attributi *standard* e crea proprietà del DOM a partire da essi.
55
55
56
-
Perciò, quando un elemento ha `id` o un altro attributo *standard*, la proprietà corrispondente viene creata. Ma questo non succede se l'attributo non è standart.
56
+
Perciò, quando un elemento ha `id` o un altro attributo *standard*, la proprietà corrispondente viene creata. Ma questo non succede se l'attributo non è standard.
57
57
58
58
Ad esempio:
59
59
```html run
@@ -68,7 +68,7 @@ Ad esempio:
68
68
</body>
69
69
```
70
70
71
-
Nota che un attributo standart di un elemento può essere sconosciuto ad un altro. Ad esempio, `"type"` è standard per `<input>` ([HTMLInputElement](https://html.spec.whatwg.org/#htmlinputelement)), ma non per `<body>` ([HTMLBodyElement](https://html.spec.whatwg.org/#htmlbodyelement)). Gli attributi standart sono descritti nella specifica della classe corrispondente dell'elemento.
71
+
Nota che un attributo standard di un elemento può essere sconosciuto ad un altro. Ad esempio, `"type"` è standard per `<input>` ([HTMLInputElement](https://html.spec.whatwg.org/#htmlinputelement)), ma non per `<body>` ([HTMLBodyElement](https://html.spec.whatwg.org/#htmlbodyelement)). Gli attributi standard sono descritti nella specifica della classe corrispondente dell'elemento.
72
72
73
73
Possiamo vederlo qui:
74
74
```html run
@@ -83,7 +83,7 @@ Possiamo vederlo qui:
83
83
</body>
84
84
```
85
85
86
-
Dunque, se un attributo non è standart, non vi sarà una corrispondente proprietà del DOM. C'è un modo per accedere a questi attributi?
86
+
Dunque, se un attributo non è standard, non vi sarà una corrispondente proprietà del DOM. C'è un modo per accedere a questi attributi?
87
87
88
88
Certo. Tutti gli attributi sono accessibili utilizzando i seguenti metodi:
89
89
@@ -94,9 +94,9 @@ Certo. Tutti gli attributi sono accessibili utilizzando i seguenti metodi:
94
94
95
95
Questi metodi operano con quello che è scritto in HTML.
96
96
97
-
Si possono altresì leggere tutti gli attributi utilizzando `elem.attributes`: una collection di oggetti che appartengono alla classe integrata [Attr](https://dom.spec.whatwg.org/#attr), con proprietà come`name` e `value`.
97
+
Si possono altresì leggere tutti gli attributi utilizzando `elem.attributes`: una collection di oggetti che appartengono alla classe integrata [Attr](https://dom.spec.whatwg.org/#attr), con proprietà come`name` e `value`.
98
98
99
-
Segue un esempio di lettura di proprietà non standart:
99
+
Segue un esempio di lettura di proprietà non standard:
100
100
101
101
```html run
102
102
<bodysomething="non-standard">
@@ -135,14 +135,14 @@ Ecco un esempio esaustivo di lavoro con gli attributi:
135
135
136
136
Nota:
137
137
138
-
1.`getAttribute('About')` -- la prima lettera è maiuscola, mentre in HTML è minuscola. Ma non importa: i nomi degli attributi sono insensibili alle maiuscole.
138
+
1.`getAttribute('About')` -- la prima lettera è maiuscola, mentre in HTML è minuscola. Non ha importanza: i nomi degli attributi sono insensibili alle maiuscole.
139
139
2. Possiamo assegnare qualsiasi cosa a un attributo, ma diventerà una stringa. Perciò qui abbiamo `"123"` come valore.
140
140
3. Tutti gli attributi, inclusi quelli che abbiamo impostato, sono visibili in `outerHTML`.
141
141
4. La collection `attributes` è iterabile e ha tutti gli attributi dell'elemento (standard e non standard) come oggetti con proprietà `name` e `value`.
142
142
143
143
## Sincronizzazione proprietà-attributo
144
144
145
-
Quando un attributo standart viene cambiato, la proprietà corrispondente viene automaticamente aggiornata, e (con qualche eccezione) vice versa.
145
+
Quando un attributo standard viene cambiato, la proprietà corrispondente viene automaticamente aggiornata, e (con qualche eccezione) vice versa.
146
146
147
147
Nell'esempio sotto `id` viene modificato come attributo, e possiamo vedere che anche la proprietà è cambiata. E questo anche al contrario:
148
148
@@ -188,7 +188,7 @@ Nell'esempio sopra:
188
188
189
189
Questa caratteristica può essere utile perché le azioni dell'utente potrebbero portare a cambi di `value`, e dopo questi, se vogliamo recuperare il valore "originale" dall'HTML, lo troveremo nell'attributo.
190
190
191
-
## Le proprietà del DOM sono tipate
191
+
## Le proprietà del DOM sono tipizzate
192
192
193
193
Le proprietà del DOM non sono sempre stringhe. Ad esempio, la proprietà `input.checked` (per i checkbox) è un booleano:
194
194
@@ -201,7 +201,7 @@ Le proprietà del DOM non sono sempre stringhe. Ad esempio, la proprietà `input
201
201
</script>
202
202
```
203
203
204
-
Ci sono altri esempi. L'attributo `style` è una stringa, ma la proprietà `style` non la è.
204
+
Ci sono altri esempi. L'attributo `style` è una stringa, ma la proprietà `style` non lo è.
@@ -216,7 +216,7 @@ Ci sono altri esempi. L'attributo `style` è una stringa, ma la proprietà `styl
216
216
</script>
217
217
```
218
218
219
-
La maggior parte dell proprietà, comunque, sono stringhe.
219
+
La maggior parte delle proprietà, comunque, sono stringhe.
220
220
221
221
Raramente, anche se il tipo di una proprietà è una stringa, questa potrebbe essere diversa dall'attributo. Ad esempio, la proprietà DOM `href` è sempre una URL *intera*, anche se l'attributo contiene una URL relativa o semplicemente un `#hash`.
222
222
@@ -238,9 +238,9 @@ Se necessitiamo del valore di `href` o di un qualsiasi altro attributo così com
238
238
239
239
## Attributi non standard, dataset
240
240
241
-
Quando scriviamo HTML, utilizziamo molti attributi standart. E quelli non standart, personalizzati? Prima di tutto, vediamo se sono utili o meno, e per cosa.
241
+
Quando scriviamo HTML, utilizziamo molti attributi standard. E quelli non standard, personalizzati? Prima di tutto, vediamo se sono utili o meno, e per cosa.
242
242
243
-
Qualche volta gli attributi non standart sono utilizzati per passare dati personalizzati dall'HTML a Javascript, o per "contrassegnare" elementi.
243
+
Qualche volta gli attributi non standard sono utilizzati per passare dati personalizzati dall'HTML a JavaScript, o per "contrassegnare" elementi.
244
244
245
245
Così:
246
246
@@ -307,9 +307,9 @@ Perché un attributo è più semplice da gestire. Lo stato può cambiare così:
307
307
div.setAttribute('order-state', 'canceled');
308
308
```
309
309
310
-
Ma c'è un potenziale problema con gli attributi personalizzati. Che succederebbe se utilizzassimo un attributo non standart che in seguito verrebbe reso tale, con le sue caratteristiche? Il linguaggio HTML è vivo, cresce, e altri attributi potrebbero apparire per soddisfare le necesssità degli sviluppatori.
310
+
Ma c'è un potenziale problema con gli attributi personalizzati. Che succederebbe se utilizzassimo un attributo non standard che in seguito verrebbe reso tale, con le sue caratteristiche? Il linguaggio HTML è vivo, cresce, e altri attributi potrebbero apparire per soddisfare le necessità degli sviluppatori.
311
311
312
-
Per evitare conflitti, abbiamo gli attributi [data-*](https://html.spec.whatwg.org/#embedding-custom-non-visible-data-with-the-data-*-attributes).
312
+
Per evitare conflitti, abbiamo a disposizione gli attributi [data-*](https://html.spec.whatwg.org/#embedding-custom-non-visible-data-with-the-data-*-attributes).
313
313
314
314
**Tutti gli attributi che cominciano con "data-" sono riservati all'uso dei programmatori. Sono disponibili nella proprietà `dataset`.**
315
315
@@ -371,7 +371,7 @@ Una piccola comparazione:
371
371
372
372
|| Proprietà | Attributi |
373
373
|------------|------------|------------|
374
-
|Tipo|Qualsiasi valore, le proprietà standard hanno i tipi descritti descritti nella specifica|Una stringa|
374
+
|Tipo|Qualsiasi valore, le proprietà standard hanno i tipi descritti nella specifica|Una stringa|
375
375
|Nome|Nome è sensibile alle maiuscole|Nome non è sensibile alle maiuscole|
376
376
377
377
I metodi per lavorare con gli attributi sono:
@@ -384,5 +384,5 @@ I metodi per lavorare con gli attributi sono:
384
384
385
385
Nella maggior parte delle situazioni è preferibile utilizzare le proprietà del DOM. Dovremmo riferirci agli attributi solo quando le proprietà non sono sufficienti, quando abbiamo bisogno dell'attributo esatto; ad esempio:
386
386
387
-
- Abbiamo bisogno di un attributo non standart. Ma se comincia con `data-`, allora dovremmo utilizzare `dataset`.
387
+
- Abbiamo bisogno di un attributo non standard. Ma se comincia con `data-`, allora dovremmo utilizzare `dataset`.
388
388
- Dobbiamo leggere un valore così "come scritto" in HTML. Il valore della corrispondente proprietà DOM potrebbe essere diverso; ad esempio la proprietà `href` è sempre una URL intera, e vorremmo il valore "originale".
0 commit comments