Oct 15, 2020 · Oct 12, 2020 · Oct 12, 2020 · Oct 12, 2020 · Oct 12, 2020 · Oct 12, 2020
diff --git a/...1-document/05-basic-dom-node-properties/2-lastchild-nodetype-inline/solution.md b/...1-document/05-basic-dom-node-properties/2-lastchild-nodetype-inline/solution.md
 There's a catch here.
 Aquí hay una trampa.

 At the time of`<script>` execution the last DOMnode 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 DOMes 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

 ---

 #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
 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
 <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>

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

 ---

 #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
 The answer: **`BODY`**.
 La respuesta: **`BODY`**.

 ```html run
 <script>
 </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

 ---

 #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/...document/05-basic-dom-node-properties/4-where-document-in-hierarchy/solution.md b/...document/05-basic-dom-node-properties/4-where-document-in-hierarchy/solution.md

 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 theprototypechain via `__proto__`.
 Recorramos la cadena deprototypetravés de `__proto__`.

 As we know, methods of a class are in the`prototype`of theconstructor.For instance, `HTMLDocument.prototype`has methods for documents.
 Como sabemos, los métodos de una clase están en el`prototype`delconstructor.Por ejemplo, `HTMLDocument.prototype`tiene métodos para documentos.

 Also, there's a reference to theconstructorfunction inside the `prototype`:
 Además, hay una referencia a la funciónconstructordentro de `prototype`:

 ```js run
 alert(HTMLDocument.prototype.constructor === HTMLDocument); // true
 ```

 To get a name of the class as astring,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 comostring,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

 ---

 #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`?
Original file line number	Diff line number	Diff line change
		@@ -1,8 +1,8 @@
		There's a catch here.
		Aquí hay una trampa.

		At the time of`<script>` execution the last DOMnode 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 DOMes 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>
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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>
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -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`.
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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>
Expand All		@@ -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);
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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>
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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"]
Original file line number	Diff line number	Diff line change
		@@ -1,4 +1,4 @@
		The answer: `BODY`.
		La respuesta: `BODY`.

		```html run
		<script>
Expand All		@@ -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"`.
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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>
		```
Original file line number	Diff line number	Diff line change
		@@ -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 theprototypechain via `__proto__`.
		Recorramos la cadena deprototypetravés de `__proto__`.

		As we know, methods of a class are in the`prototype`of theconstructor.For instance, `HTMLDocument.prototype`has methods for documents.
		Como sabemos, los métodos de una clase están en el`prototype`delconstructor.Por ejemplo, `HTMLDocument.prototype`tiene métodos para documentos.

		Also, there's a reference to theconstructorfunction inside the `prototype`:
		Además, hay una referencia a la funciónconstructordentro de `prototype`:

		```js run
		alert(HTMLDocument.prototype.constructor === HTMLDocument); // true
		```

		To get a name of the class as astring,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 comostring,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.
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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`?