Merge pull request #422 from homero304/Node-properties_type-tag-and-contents

joaquinelio · web-flow · commit ead3c545f709 · 2020-10-14T22:31:46.000-03: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.
+Aquí hay una trampa.
 
-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.
+En el momento de la ejecución de `<script>`, el último nodo DOM es exactamente `<script>`, porque el navegador aún no procesó el resto de la página.
 
-So the result is `1` (element node).
+Entonces el resultado es `1` (nodo de 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
@@ -2,9 +2,9 @@ importance: 5
 
 ---
 
-# What's in the nodeType?
+# ¿Qué hay en nodeType?
 
-What does the script show?
+¿Qué muestra el 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>`:
+Hagamos un ciclo sobre `<li>`:
 
 ```js
 for (let li of document.querySelectorAll('li')) {
   ...
 }
 ```
 
-In the loop we need to get the text inside every `li`.
+En el ciclo, necesitamos introducir el texto dentro de cada `li`.
 
-We can read the text from the first child node of `li`, that is the text node:
+Podemos leer el texto del primer nodo hijo de `li`, que es el nodo de texto:
 
 ```js
 for (let li of document.querySelectorAll('li')) {
   let title = li.firstChild.data;
 
-  // title is the text in <li> before any other nodes
+  // el título es el texto en <li> antes de cualquier otro nodo
 }
 ```
 
-Then we can get the number of descendants as `li.getElementsByTagName('li').length`.
+Entonces podemos obtener el número de descendientes como `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
@@ -3,36 +3,36 @@
 <body>
 
   <ul>
-    <li>Animals
+    <li>Animales
       <ul>
-        <li>Mammals
+        <li>Mamíferos
           <ul>
-            <li>Cows</li>
-            <li>Donkeys</li>
-            <li>Dogs</li>
-            <li>Tigers</li>
+            <li>Vacas</li>
+            <li>Burros</li>
+            <li>Perros</li>
+            <li>Tigres</li>
           </ul>
         </li>
-        <li>Other
+        <li>Otros
           <ul>
-            <li>Snakes</li>
-            <li>Birds</li>
-            <li>Lizards</li>
+            <li>Serpientes</li>
+            <li>Aves</li>
+            <li>Lagartos</li>
           </ul>
         </li>
       </ul>
     </li>
-    <li>Fishes
+    <li>Peces
       <ul>
-        <li>Aquarium
+        <li>Acuario
           <ul>
             <li>Guppy</li>
-            <li>Angelfish</li>
+            <li>Angelote</li>
           </ul>
         </li>
-        <li>Sea
+        <li>Mar
           <ul>
-            <li>Sea trout</li>
+            <li>Trucha de mar</li>
           </ul>
         </li>
       </ul>
@@ -41,12 +41,12 @@
 
   <script>
     for (let li of document.querySelectorAll('li')) {
-      // get the title from the text node
+      // obtener el título del nodo de texto
       let title = li.firstChild.data;
 
-      title = title.trim(); // remove extra spaces from ends
+      title = title.trim(); // eliminar los espacios adicionales de los extremos
 
-      // get the descendants count
+      // obtener el recuento de descendientes
       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
@@ -3,44 +3,44 @@
 <body>
 
   <ul>
-    <li>Animals
+    <li>Animales
       <ul>
-        <li>Mammals
+        <li>Mamíferos
           <ul>
-            <li>Cows</li>
-            <li>Donkeys</li>
-            <li>Dogs</li>
-            <li>Tigers</li>
+            <li>Vacas</li>
+            <li>Burros</li>
+            <li>Perros</li>
+            <li>Tigres</li>
           </ul>
         </li>
-        <li>Other
+        <li>Otros
           <ul>
-            <li>Snakes</li>
-            <li>Birds</li>
-            <li>Lizards</li>
+            <li>Serpientes</li>
+            <li>Aves</li>
+            <li>Lagartos</li>
           </ul>
         </li>
       </ul>
     </li>
-    <li>Fishes
+    <li>Peces
       <ul>
-        <li>Aquarium
+        <li>Acuario
           <ul>
             <li>Guppy</li>
-            <li>Angelfish</li>
+            <li>Angelote</li>
           </ul>
         </li>
-        <li>Sea
+        <li>Mar
           <ul>
-            <li>Sea trout</li>
+            <li>Trucha de mar</li>
           </ul>
         </li>
       </ul>
     </li>
   </ul>
 
   <script>
-    // ... your code...
+    // ... tu código...
   </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
@@ -2,13 +2,13 @@ importance: 5
 
 ---
 
-# Count descendants
+# Contar los descendientes
 
-There's a tree structured as nested `ul/li`.
+Hay un árbol estructurado como `ul/li` anidado.
 
-Write the code that for each `<li>` shows:
+Escribe el código que para cada `<li>` muestra:
 
-1. What's the text inside it (without the subtree)
-2. The number of nested `<li>` -- all descendants, including the deeply nested ones.
+1. ¿Cuál es el texto dentro de él (sin el subárbol)?
+2. El número de `<li>` anidados: todos los descendientes, incluidos los profundamente anidados.
 
 [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`**.
+La respuesta: **`BODY`**.
 
 ```html run
 <script>
@@ -10,8 +10,8 @@ The answer: **`BODY`**.
 </script>
 ```
 
-What's going on step by step:
+¿Qué está pasando paso a paso?
 
-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. El contenido de `<body>` se reemplaza con el comentario. El comentario es `<!--BODY-->`, porque `body.tagName == "BODY"`. Como recordamos, `tagName` siempre está en mayúsculas en HTML.
+2. El comentario es ahora el único nodo hijo, así que lo obtenemos en `body.firstChild`.
+3. La propiedad `data` del comentario es su contenido (dentro de `<!--...-->`): `"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
@@ -2,16 +2,16 @@ importance: 3
 
 ---
 
-# Tag in comment
+# Etiqueta en comentario
 
-What does this code show?
+¿Qué muestra este código?
 
 ```html
 <script>
   let body = document.body;
 
   body.innerHTML = "<!--" + body.tagName + "-->";
 
-  alert( body.firstChild.data ); // what's here?
+  alert( body.firstChild.data ); // ¿qué hay aquí?
 </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:
+Podemos ver a qué clase pertenece, imprimiéndola, así:
 
 ```js run
 alert(document); // [object HTMLDocument]
 ```
 
-Or:
+O:
 
 ```js run
 alert(document.constructor.name); // HTMLDocument
 ```
 
-So, `document` is an instance of `HTMLDocument` class.
+Entonces, `document` es una instancia de la clase `HTMLDocument`.
 
-What's its place in the hierarchy?
+¿Cuál es su lugar en la jerarquía?
 
-Yeah, we could browse the specification, but it would be faster to figure out manually.
+Sí, podríamos examinar las especificaciones, pero sería más rápido averiguarlo manualmente.
 
-Let's traverse the prototype chain via `__proto__`.
+Recorramos la cadena de prototype través de `__proto__`.
 
-As we know, methods of a class are in the `prototype` of the constructor. For instance, `HTMLDocument.prototype` has methods for documents.
+Como sabemos, los métodos de una clase están en el `prototype` del constructor. Por ejemplo, `HTMLDocument.prototype` tiene métodos para documentos.
 
-Also, there's a reference to the constructor function inside the `prototype`:
+Además, hay una referencia a la función constructor dentro de `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`:
+Para obtener un nombre de la clase como string, podemos usar `constructor.name`. Hagámoslo para toda la cadena prototype de `document`, hasta la clase `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.
+Esa es la jerarquía.
 
-We also could examine the object using `console.dir(document)` and see these names by opening `__proto__`. The console takes them from `constructor` internally.
+También podríamos examinar el objeto usando `console.dir(document)` y ver estos nombres abriendo `__proto__`. La consola los toma del `constructor` internamente.
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
@@ -2,10 +2,10 @@ importance: 4
 
 ---
 
-# Where's the "document" in the hierarchy?
+# ¿Dónde está el "document" en la jerarquía?
 
-Which class does the `document` belong to?
+¿A qué clase pertenece el `document`?
 
-What's its place in the DOM hierarchy?
+¿Cuál es su lugar en la jerarquía DOM?
 
-Does it inherit from `Node` or `Element`, or maybe `HTMLElement`?
+¿Hereda de `Node` o `Element`, o tal vez `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
