Node properties: type, tag and contents #268
Conversation
…vascript.info into article/node-properties-type-tag-and-contents
|
|
|
|
||
| We can read the text from the first child node of `li`, that is the text node: | ||
| Possiamo leggere il testo dal primo nodo figlio di `li` che è un nodo di testo: |
There was a problem hiding this comment.
| Possiamo leggere il testo dal primo nodo figlio di `li` che è un nodo di testo: | |
| Possiamo leggere il testo dal primo nodo figlio di `li`, che è un nodo di testo: |
| @@ -62,219 +63,217 @@ alert( document.body instanceof Node ); // true | |||
| alert( document.body instanceof EventTarget ); // true | |||
| ``` | |||
|
|
|||
| As we can see, DOM nodes are regular JavaScript objects. They use prototype-based classes for inheritance. | |||
| Come possiamo notare i nodi DOM sono oggetti JavaScript regolari ed usano classi basate sui prototipi per l'ereditarietà. | |||
There was a problem hiding this comment.
| Come possiamo notare i nodi DOM sono oggetti JavaScript regolari ed usano classi basate sui prototipi per l'ereditarietà. | |
| Come possiamo notare i nodi DOM sono regolari oggetti JavaScript ed usano classi basate sui prototipi per l'ereditarietà. |
Piccolo suggerimento, mi sembra suoni meglio, ma anche la tua versione va benissimo :)
There was a problem hiding this comment.
Sì, effettivamente vanno bene entrambe. Continuo ad avere una leggera preferenza per l'aggettivo dopo: mi sembra che dia più evidenza al termine "regolari"
|
|
||
| ```smart header="`console.dir(elem)` versus `console.log(elem)`" | ||
| Most browsers support two commands in their developer tools: `console.log` and `console.dir`. They output their arguments to the console. For JavaScript objects these commands usually do the same. | ||
| La maggior parte dei browser supportano due comandi nei loro strumenti per sviluppatori: `console.log` e `console.dir` che mostrano in console i loro argomenti. Per quanto riguarda gli oggetti JavaScript solitamente questi comandi funzionano allo stesso modo. |
There was a problem hiding this comment.
| La maggior parte dei browser supportano due comandi nei loro strumenti per sviluppatori: `console.log` e `console.dir` che mostrano in console i loro argomenti. Per quanto riguarda gli oggetti JavaScript solitamente questi comandi funzionano allo stesso modo. | |
| La maggior parte dei browser supportano due comandi nei loro strumenti per sviluppatori: `console.log` e `console.dir` che mostrano in console i loro argomenti. Per quanto riguarda gli oggetti JavaScript, solitamente questi comandi funzionano allo stesso modo. |
There was a problem hiding this comment.
Complimenti, ottima traduzione! 👍 ti ho lasciato un paio di spunti per migliorare la scorrevolezza, sentiti libero di accettarli/rifiutarli/discuterne.
C'è solo una modifica obbligatoria che ti ho segnalato sotto, hai trovato un caso speciale che rompe la renderizzazione della pagina 😆
| </script> | ||
|
|
||
| </body> | ||
| ``` | ||
|
|
||
| ```smart header="Scripts don't execute" | ||
| If `innerHTML` inserts a `<script>` tag into the document -- it becomes a part of HTML, but doesn't execute. | ||
| ```smart header="I tag <script> non vengono eseguiti" |
There was a problem hiding this comment.
Complimenti hai beccato un caso particolare finora sconosciuto 😆 Non puoi mettere le parentesi angolari su uno smart header, se vuoi farlo, devi racchiuderli dentro i backtick
| ```smart header="I tag <script> non vengono eseguiti" | |
| ```smart header="I tag `<script>` non vengono eseguiti" |
There was a problem hiding this comment.
Volevo vedere se eravate attenti 🤣
|
|
||
| In the line `(*)` we replaced `div` with `<p>A new element</p>`. In the outer document (the DOM) we can see the new content instead of the `<div>`. But, as we can see in line `(**)`, the value of the old `div` variable hasn't changed! | ||
| Nella linea `(*)` sostituiamo `div` con `<p>A new element</p>`. Nel documento (il DOM) possiamo osservare che il nuovo contenuto ha preso il posto di `<div>`. Tuttavia, come possiamo notare nella linea `(**)`, il precedente valore della variabile `div`non è cambiato! |
There was a problem hiding this comment.
| Nella linea `(*)` sostituiamo `div` con `<p>A new element</p>`. Nel documento (il DOM) possiamo osservare che il nuovo contenuto ha preso il posto di `<div>`. Tuttavia, come possiamo notare nella linea `(**)`, il precedente valore della variabile `div`non è cambiato! | |
| Nella linea `(*)` sostituiamo `div` con `<p>A new element</p>`. Nel documento (il DOM) possiamo osservare che il nuovo contenuto ha preso il posto di `<div>`. Tuttavia, come possiamo notare nella linea `(**)`, il precedente valore della variabile `div` non è cambiato! |
|
|
||
| `nodeName/tagName` | ||
| : For elements, tag name (uppercased unless XML-mode). For non-element nodes `nodeName` describes what it is. Read-only. | ||
| : Per gli elementi indica il nome del tag (in lettere maiuscole a meno che il browser non sia in modalità XML). Per tutti gli altri nodi `nodeName` contiene una stringa destrittiva. La proprietà è in sola lettura. |
There was a problem hiding this comment.
| : Per gli elementi indica il nome del tag (in lettere maiuscole a meno che il browser non sia in modalità XML). Per tutti gli altri nodi `nodeName` contiene una stringa destrittiva. La proprietà è in sola lettura. | |
| : Per gli elementi indica il nome del tag (in lettere maiuscole a meno che il browser non sia in modalità XML). Per tutti gli altri nodi `nodeName` contiene una stringa descrittiva. La proprietà è in sola lettura. |
|
|
||
| Different DOM nodes may have different properties. For instance, an element node corresponding to tag `<a>` has link-related properties, and the one corresponding to `<input>` has input-related properties and so on. Text nodes are not the same as element nodes. But there are also common properties and methods between all of them, because all classes of DOM nodes form a single hierarchy. | ||
| Nodi del DOM differenti possono avere proprietà differenti. Ad esempio, un nodo elemento corrispondente ad un tag `<a>` avrà proprietà tipiche dei link ed un nodo corrispondente al tag `<input>` avrà proprietà tipiche dei campi di testo e così via. I nodi di testo sono differenti dai nodi elemento, tuttavia condividono anche proprietà e metodi comuni a tutti perché tutte le classi dei nodi del DOM costituiscono un'unica gerarchia. |
There was a problem hiding this comment.
| Nodi del DOM differenti possono avere proprietà differenti. Ad esempio, un nodo elemento corrispondente ad un tag `<a>` avrà proprietà tipiche dei link ed un nodo corrispondente al tag `<input>` avrà proprietà tipiche dei campi di testo e così via. I nodi di testo sono differenti dai nodi elemento, tuttavia condividono anche proprietà e metodi comuni a tutti perché tutte le classi dei nodi del DOM costituiscono un'unica gerarchia. | |
| Nodi del DOM differenti possono avere proprietà differenti. Ad esempio, un nodo elemento corrispondente ad un tag `<a>` avrà proprietà tipiche dei link ed un nodo corrispondente al tag `<input>` avrà proprietà tipiche dei campi di testo e così via. I nodi di testo sono differenti dai nodi elemento, tuttavia condividono alcune proprietà e metodi comuni a tutti, perché tutte le classi dei nodi del DOM costituiscono un'unica gerarchia. |
|
|
||
| That's also easy to see by outputting an element with `console.dir(elem)` in a browser. There in the console you can see `HTMLElement.prototype`, `Element.prototype` and so on. | ||
| Questo è anche facile da osservare esaminando un elemento in un browser con `console.dir(elem)`. Nella console potremo vedere `HTMLElement.prototype`, `Element.prototype` e così via. |
There was a problem hiding this comment.
| Questo è anche facile da osservare esaminando un elemento in un browser con `console.dir(elem)`. Nella console potremo vedere `HTMLElement.prototype`, `Element.prototype` e così via. | |
| Questo è facilmente osservabile esaminando un elemento in un browser con `console.dir(elem)`. Nella console potremo vedere `HTMLElement.prototype`, `Element.prototype` e così via. |
|
|
||
| Here's an excerpt from it, with comments: | ||
| Eccone un estratto, con commenti: |
There was a problem hiding this comment.
| Eccone un estratto, con commenti: | |
| Eccone un estratto commentato: |
|
|
||
| We can also modify it. So it's one of the most powerful ways to change the page. | ||
| Possiamo anche modificarla e pertanto è uno dei più potenti strumenti per cambiare la pagina. |
There was a problem hiding this comment.
Suggerisco una modifica che si discosta leggermente dall'articolo inglese, che mi sembra poco chiaro in questo caso.. infatti quel "change the page", può essere fuorviante
| Possiamo anche modificarla e pertanto è uno dei più potenti strumenti per cambiare la pagina. | |
| Possiamo anche modificarla e pertanto è uno dei più potenti strumenti per modificare porzioni della pagina. |
There was a problem hiding this comment.
A me sembrava chiaro, cambiare un singolo elemento equivale a cambiare la pagina (non necessariamente nella sua interezza), però capisco che possa essere frainteso. Se vogliamo discostarci un po' dall'inglese originario (cosa utile in molti casi), che ne pensi di "modificare l'HTML di un elemento della pagina"? In questo modo ricorriamo ad una perifrasi esplicativa senza allontanarci troppo dal "change the page" originale
|
|
||
| The example shows the contents of `document.body` and then replaces it completely: | ||
| L'esempio mostra il contenuto di `document.body` e quindi lo rimpiazza completamente: |
There was a problem hiding this comment.
In questo caso il "then" è inteso come "poi".. infatti guardando l'esempio, fa un alert del body e poi lo rimpiazza
| L'esempio mostra il contenuto di `document.body` e quindi lo rimpiazza completamente: | |
| L'esempio mostra il contenuto di `document.body` e successivamente lo rimpiazza completamente: |
There was a problem hiding this comment.
D'accordissimo! Userei "poi lo rimpiazza" perché mi suonano male due avverbi di modo troppo vicini
|
|
||
| ## Summary | ||
| ## Sommario |
There was a problem hiding this comment.
"Summary" lo traduciamo come "Riepilogo", non ricordo se è a Glossario, nel caso ora lo aggiungo
| ## Sommario | |
| ## Riepilogo |
|
Please make the requested changes. After it, add a comment "/done". |
|
|
||
| In the `chatDiv` example above the line `chatDiv.innerHTML+="How goes?"` re-creates the HTML content and reloads `smile.gif` (hope it's cached). If `chatDiv` has a lot of other text and images, then the reload becomes clearly visible. | ||
| Nell'esempio `chatDiv` sopra, la linea `chatDiv.innerHTML+="How goes?"` ricrea il contenuto HTML e ricarica `smile.gif` (speriamo sia in cache). Se `chatDiv` ha molto altro testo e immagini, in quel caso, il tempo di ricaricamento potrebbe diventare chiaramente percepibile. |
There was a problem hiding this comment.
| Nell'esempio `chatDiv` sopra, la linea `chatDiv.innerHTML+="How goes?"` ricrea il contenuto HTML e ricarica `smile.gif` (speriamo sia in cache). Se `chatDiv` ha molto altro testo e immagini, in quel caso, il tempo di ricaricamento potrebbe diventare chiaramente percepibile. | |
| Nell'esempio `chatDiv` sopra, la linea `chatDiv.innerHTML+="How goes?"` ricrea il contenuto HTML e ricarica `smile.gif` (speriamo sia in cache). Se `chatDiv` ha molto altro testo e immagini il tempo di ricaricamento potrebbe diventare chiaramente percepibile. |
"in quel caso" e' un po' superfluo e verboso, la frase originale e' piu' intuitiva, si capisce gia' bene qual e' il caso in questione...
|
/done |
|
Thank you 💖 I updated the Progress Issue #1 🎉 🎉 🎉 |
No description provided.