Skip to content

Commit 6e30f20

Browse files
Apply suggestions from code review
Co-authored-by: Andrea <45577511+longo-andrea@users.noreply.github.com>
1 parent 507f207 commit 6e30f20

File tree

1 file changed

+19
-19
lines changed
  • 2-ui/1-document/06-dom-attributes-and-properties

1 file changed

+19
-19
lines changed

2-ui/1-document/06-dom-attributes-and-properties/article.md

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,11 @@ Quando il browser carica una pagina, "legge" (in altre parole: "analizza") l'HTM
44

55
Ad esempio, se il tag è `<body id="page">`, allora l'oggetto DOM ha `body.id="page"`.
66

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.
88

99
## Proprietà del DOM
1010

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.
1212

1313
I nodi del DOM sono regolari oggetti JavaScript. Possiamo modificarli.
1414

@@ -51,9 +51,9 @@ Quindi, le proprietà e i metodi del DOM si comportano come regolari oggetti Jav
5151

5252
## Attributi HTML
5353

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.
5555

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.
5757

5858
Ad esempio:
5959
```html run
@@ -68,7 +68,7 @@ Ad esempio:
6868
</body>
6969
```
7070

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.
7272

7373
Possiamo vederlo qui:
7474
```html run
@@ -83,7 +83,7 @@ Possiamo vederlo qui:
8383
</body>
8484
```
8585

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?
8787

8888
Certo. Tutti gli attributi sono accessibili utilizzando i seguenti metodi:
8989

@@ -94,9 +94,9 @@ Certo. Tutti gli attributi sono accessibili utilizzando i seguenti metodi:
9494

9595
Questi metodi operano con quello che è scritto in HTML.
9696

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`.
9898

99-
Segue un esempio di lettura di proprietà non standart:
99+
Segue un esempio di lettura di proprietà non standard:
100100

101101
```html run
102102
<body something="non-standard">
@@ -135,14 +135,14 @@ Ecco un esempio esaustivo di lavoro con gli attributi:
135135

136136
Nota:
137137

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.
139139
2. Possiamo assegnare qualsiasi cosa a un attributo, ma diventerà una stringa. Perciò qui abbiamo `"123"` come valore.
140140
3. Tutti gli attributi, inclusi quelli che abbiamo impostato, sono visibili in `outerHTML`.
141141
4. La collection `attributes` è iterabile e ha tutti gli attributi dell'elemento (standard e non standard) come oggetti con proprietà `name` e `value`.
142142

143143
## Sincronizzazione proprietà-attributo
144144

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.
146146

147147
Nell'esempio sotto `id` viene modificato come attributo, e possiamo vedere che anche la proprietà è cambiata. E questo anche al contrario:
148148

@@ -188,7 +188,7 @@ Nell'esempio sopra:
188188

189189
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.
190190

191-
## Le proprietà del DOM sono tipate
191+
## Le proprietà del DOM sono tipizzate
192192

193193
Le proprietà del DOM non sono sempre stringhe. Ad esempio, la proprietà `input.checked` (per i checkbox) è un booleano:
194194

@@ -201,7 +201,7 @@ Le proprietà del DOM non sono sempre stringhe. Ad esempio, la proprietà `input
201201
</script>
202202
```
203203

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 è.
205205

206206
```html run
207207
<div id="div" style="color:red;font-size:120%">Hello</div>
@@ -216,7 +216,7 @@ Ci sono altri esempi. L'attributo `style` è una stringa, ma la proprietà `styl
216216
</script>
217217
```
218218

219-
La maggior parte dell proprietà, comunque, sono stringhe.
219+
La maggior parte delle proprietà, comunque, sono stringhe.
220220

221221
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`.
222222

@@ -238,9 +238,9 @@ Se necessitiamo del valore di `href` o di un qualsiasi altro attributo così com
238238

239239
## Attributi non standard, dataset
240240

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.
242242

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.
244244

245245
Così:
246246

@@ -307,9 +307,9 @@ Perché un attributo è più semplice da gestire. Lo stato può cambiare così:
307307
div.setAttribute('order-state', 'canceled');
308308
```
309309

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.
311311

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).
313313

314314
**Tutti gli attributi che cominciano con "data-" sono riservati all'uso dei programmatori. Sono disponibili nella proprietà `dataset`.**
315315

@@ -371,7 +371,7 @@ Una piccola comparazione:
371371

372372
| | Proprietà | Attributi |
373373
|------------|------------|------------|
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|
375375
|Nome|Nome è sensibile alle maiuscole|Nome non è sensibile alle maiuscole|
376376

377377
I metodi per lavorare con gli attributi sono:
@@ -384,5 +384,5 @@ I metodi per lavorare con gli attributi sono:
384384

385385
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:
386386

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`.
388388
- 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

Comments
 (0)