Merge pull request #268 from marcellosurdi/article/node-properties-type-tag-and-contents

longo-andrea · web-flow · commit 62386bc054e9 · 2021-03-21T21:25:47.000+01:00
Node properties: type, tag and contents
diff --git a/2-ui/1-document/05-basic-dom-node-properties/2-lastchild-nodetype-inline/solution.md b/2-ui/1-document/05-basic-dom-node-properties/2-lastchild-nodetype-inline/solution.md
@@ -1,8 +1,8 @@
-There's a catch here.
+C'è un tranello in questo esercizio.
 
-At the time of `<script>` execution the last DOM node is exactly `<script>`, because the browser did not process the rest of the page yet.
+Al momento dell'esecuzione di `<script>` l'ultimo nodo del DOM è esattamente `<script>`, dal momento che il browser non ha ancora elaborato il resto della pagina.
 
-So the result is `1` (element node).
+Pertanto il risultato è `1` (nodo elemento).
 
 ```html run height=60
 <html>
diff --git a/2-ui/1-document/05-basic-dom-node-properties/2-lastchild-nodetype-inline/task.md b/2-ui/1-document/05-basic-dom-node-properties/2-lastchild-nodetype-inline/task.md
@@ -1,10 +1,10 @@
-importance: 5
+importanza: 5
 
 ---
 
-# What's in the nodeType?
+# Cosa contiene nodeType?
 
-What does the script show?
+Cosa mostrerà lo script?
 
 ```html
 <html>
diff --git a/2-ui/1-document/05-basic-dom-node-properties/2-tree-info/solution.md b/2-ui/1-document/05-basic-dom-node-properties/2-tree-info/solution.md
@@ -1,21 +1,21 @@
-Let's make a loop over `<li>`:
+Effettuiamo un ciclo iterativo sugli elementi `<li>`:
 
 ```js
 for (let li of document.querySelectorAll('li')) {
   ...
 }
 ```
 
-In the loop we need to get the text inside every `li`.
+Per ciascuna iterazione abbiamo bisogno di ricavare il testo all'interno di ogni `li`.
 
-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:
 
 ```js
 for (let li of document.querySelectorAll('li')) {
   let title = li.firstChild.data;
 
-  // title is the text in <li> before any other nodes
+  // title è il testo nel <li> prima di qualsiasi altro nodo
 }
 ```
 
-Then we can get the number of descendants as `li.getElementsByTagName('li').length`.
+A questo punto possiamo ricavare il numero dei discendenti con `li.getElementsByTagName('li').length`.
diff --git a/2-ui/1-document/05-basic-dom-node-properties/2-tree-info/solution.view/index.html b/2-ui/1-document/05-basic-dom-node-properties/2-tree-info/solution.view/index.html
@@ -41,12 +41,12 @@
 
   <script>
     for (let li of document.querySelectorAll('li')) {
-      // get the title from the text node
+      // ricava il titolo dal nodo di testo
       let title = li.firstChild.data;
 
-      title = title.trim(); // remove extra spaces from ends
+      title = title.trim(); // rimuove gli spazi bianchi all'inizio e alla fine
 
-      // get the descendants count
+      // ottiene il numero dei discendenti
       let count = li.getElementsByTagName('li').length;
 
       alert(title + ': ' + count);
diff --git a/2-ui/1-document/05-basic-dom-node-properties/2-tree-info/source.view/index.html b/2-ui/1-document/05-basic-dom-node-properties/2-tree-info/source.view/index.html
@@ -40,7 +40,7 @@
   </ul>
 
   <script>
-    // ... your code...
+    // ... il tuo codice ...
   </script>
 
 </body>
diff --git a/2-ui/1-document/05-basic-dom-node-properties/2-tree-info/task.md b/2-ui/1-document/05-basic-dom-node-properties/2-tree-info/task.md
@@ -1,14 +1,14 @@
-importance: 5
+importanza: 5
 
 ---
 
-# Count descendants
+# Contate i discendenti
 
-There's a tree structured as nested `ul/li`.
+Abbiamo un alberatura HTML strutturata come un elenco di `ul/li` annidati.
 
-Write the code that for each `<li>` shows:
+Scrivete il codice che per ogni elemento `<li>` mostri:
 
-1. What's the text inside it (without the subtree)
-2. The number of nested `<li>` -- all descendants, including the deeply nested ones.
+1. Qual è il testo al suo interno (senza considerare il testo di eventuali sottoelementi).
+2. Il numero degli elementi `<li>` annidati -- tutti i discendenti, considerando tutti i livelli di annidamento.
 
 [demo src="solution"]
diff --git a/2-ui/1-document/05-basic-dom-node-properties/3-tag-in-comment/solution.md b/2-ui/1-document/05-basic-dom-node-properties/3-tag-in-comment/solution.md
@@ -1,4 +1,4 @@
-The answer: **`BODY`**.
+Risposta: **`BODY`**.
 
 ```html run
 <script>
@@ -10,8 +10,8 @@ The answer: **`BODY`**.
 </script>
 ```
 
-What's going on step by step:
+Vediamo cosa succede passo dopo passo:
 
-1. The content of `<body>` is replaced with the comment. The comment is `<!--BODY-->`, because `body.tagName == "BODY"`. As we remember, `tagName` is always uppercase in HTML.
-2. The comment is now the only child node, so we get it in `body.firstChild`.
-3. The `data` property of the comment is its contents (inside `<!--...-->`): `"BODY"`.
+1. Il contenuto di `<body>` è rimpiazzato con il commento. Il commento è `<!--BODY-->`, poiché `body.tagName == "BODY"`. Abbiamo detto che, `tagName` è sempre maiuscolo in modalità HTML.
+2. Il commento è ora l'unico nodo figlio, perciò è il risultato di `body.firstChild`.
+3. La proprietà `data` del commento è il suo contenuto (ovvero ciò che è dentro i tag di apertura e chiusura `<!--...-->`): `"BODY"`.
diff --git a/2-ui/1-document/05-basic-dom-node-properties/3-tag-in-comment/task.md b/2-ui/1-document/05-basic-dom-node-properties/3-tag-in-comment/task.md
@@ -1,17 +1,17 @@
-importance: 3
+importanza: 3
 
 ---
 
-# Tag in comment
+# Tag nel commento
 
-What does this code show?
+Cosa mostrerà questo codice?
 
 ```html
 <script>
   let body = document.body;
 
   body.innerHTML = "<!--" + body.tagName + "-->";
 
-  alert( body.firstChild.data ); // what's here?
+  alert( body.firstChild.data ); // cosa c'è qui?
 </script>
 ```
diff --git a/2-ui/1-document/05-basic-dom-node-properties/4-where-document-in-hierarchy/solution.md b/2-ui/1-document/05-basic-dom-node-properties/4-where-document-in-hierarchy/solution.md
@@ -1,40 +1,40 @@
 
-We can see which class it belongs by outputting it, like:
+Possiamo visualizzare a quale classe appartiene esaminandola in questo modo:
 
 ```js run
 alert(document); // [object HTMLDocument]
 ```
 
-Or:
+Oppure:
 
 ```js run
 alert(document.constructor.name); // HTMLDocument
 ```
 
-So, `document` is an instance of `HTMLDocument` class.
+Quindi `document` è un'istanza della classe `HTMLDocument`.
 
-What's its place in the hierarchy?
+Qual è il suo posto nella gerarchia DOM?
 
-Yeah, we could browse the specification, but it would be faster to figure out manually.
+Certo, potremmo sfogliare la specifica, ma sarebbe più veloce scoprirlo manualmente.
 
-Let's traverse the prototype chain via `__proto__`.
+Attraversiamo la catena dei prototipi tramite `__proto__`.
 
-As we know, methods of a class are in the `prototype` of the constructor. For instance, `HTMLDocument.prototype` has methods for documents.
+Come sappiamo i metodi di una classe sono nel `prototype` del costruttore. Per esempio `HTMLDocument.prototype` ha i metodi per i documenti.
 
-Also, there's a reference to the constructor function inside the `prototype`:
+C'è inoltre un riferimento al costruttore all'interno di `prototype`:
 
 ```js run
 alert(HTMLDocument.prototype.constructor === HTMLDocument); // true
 ```
 
-To get a name of the class as a string, we can use `constructor.name`. Let's do it for the whole `document` prototype chain, till class `Node`:
+Per ricavare la stringa con il nome della classe possiamo usare `constructor.name`. Facciamolo per l'intera catena prototipale `document` fino alla classe` Node`:
 
 ```js run
 alert(HTMLDocument.prototype.constructor.name); // HTMLDocument
 alert(HTMLDocument.prototype.__proto__.constructor.name); // Document
 alert(HTMLDocument.prototype.__proto__.__proto__.constructor.name); // Node
 ```
 
-That's the hierarchy.
+Questa è la gerachia.
 
-We also could examine the object using `console.dir(document)` and see these names by opening `__proto__`. The console takes them from `constructor` internally.
+Potremmo anche esaminare l'oggetto usando `console.dir(document)` e visualizzare gli stessi nomi aprendo `__proto__`. La console li ricava internamente da `constructor`.
diff --git a/2-ui/1-document/05-basic-dom-node-properties/4-where-document-in-hierarchy/task.md b/2-ui/1-document/05-basic-dom-node-properties/4-where-document-in-hierarchy/task.md
@@ -1,11 +1,11 @@
-importance: 4
+importanza: 4
 
 ---
 
-# Where's the "document" in the hierarchy?
+# In che punto della gerarchia DOM si trova "document"?
 
-Which class does the `document` belong to?
+A quale classe appartiene `document`?
 
-What's its place in the DOM hierarchy?
+Qual è il suo posto nella gerarchia DOM?
 
-Does it inherit from `Node` or `Element`, or maybe `HTMLElement`?
+Eredita da `Node`, da `Element` o forse da `HTMLElement`?
diff --git a/2-ui/1-document/05-basic-dom-node-properties/article.md b/2-ui/1-document/05-basic-dom-node-properties/article.md
