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 index 52c34640a..46e2f6588 100644 --- 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 ` 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 index f2d9edc67..066ac9b13 100644 --- 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 `
  • ` shows: +Escribe el código que para cada `
  • ` muestra: -1. What's the text inside it (without the subtree) -2. The number of nested `
  • ` -- 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 `
  • ` 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 index 32900a789..a2e548367 100644 --- 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 ``` -What's going on step by step: +¿Qué está pasando paso a paso? -1. The content of `` is replaced with the comment. The comment is ``, 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 `` se reemplaza con el comentario. El comentario es ``, 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 index efe50b48f..e55beb21f 100644 --- 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,9 +2,9 @@ importance: 3 --- -# Tag in comment +# Etiqueta en comentario -What does this code show? +¿Qué muestra este código? ```html ``` 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 index cb9456717..6b7d529b2 100644 --- 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,33 +1,33 @@ -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 @@ -35,6 +35,6 @@ 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 index de266c6ae..2f63f606f 100644 --- 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 index 76469c187..83dadda64 100644 --- a/2-ui/1-document/05-basic-dom-node-properties/article.md +++ b/2-ui/1-document/05-basic-dom-node-properties/article.md @@ -1,58 +1,58 @@ -# Node properties: type, tag and contents +# Propiedades del nodo: tipo, etiqueta y contenido -Let's get a more in-depth look at DOM nodes. +Echemos un mirada más en profundidad a los nodos DOM. -In this chapter we'll see more into what they are and learn their most used properties. +En este capítulo veremos más sobre cuáles son y aprenderemos sus propiedades más utilizadas. -## DOM node classes +## Clases de nodo DOM -Different DOM nodes may have different properties. For instance, an element node corresponding to tag `` has link-related properties, and the one corresponding to `` 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. +Los diferentes nodos DOM pueden tener diferentes propiedades. Por ejemplo, un nodo de elemento correspondiente a la etiqueta `` tiene propiedades relacionadas con el enlace, y el correspondiente a `` tiene propiedades relacionadas con la entrada y así sucesivamente. Los nodos de texto no son lo mismo que los nodos de elementos. Pero también hay propiedades y métodos comunes entre todos ellos, porque todas las clases de nodos DOM forman una única jerarquía. -Each DOM node belongs to the corresponding built-in class. +Cada nodo DOM pertenece a la clase nativa correspondiente. -The root of the hierarchy is [EventTarget](https://dom.spec.whatwg.org/#eventtarget), that is inherited by [Node](http://dom.spec.whatwg.org/#interface-node), and other DOM nodes inherit from it. +La raíz de la jerarquía es [EventTarget](https://dom.spec.whatwg.org/#eventtarget), que es heredada por [Node](http://dom.spec.whatwg.org/#interface-node), y otros nodos DOM heredan de él. -Here's the picture, explanations to follow: +Aquí está la imagen, con las explicaciones a continuación: ![](dom-class-hierarchy.svg) -The classes are: +Las clases son: -- [EventTarget](https://dom.spec.whatwg.org/#eventtarget) -- is the root "abstract" class. Objects of that class are never created. It serves as a base, so that all DOM nodes support so-called "events", we'll study them later. -- [Node](http://dom.spec.whatwg.org/#interface-node) -- is also an "abstract" class, serving as a base for DOM nodes. It provides the core tree functionality: `parentNode`, `nextSibling`, `childNodes` and so on (they are getters). Objects of `Node` class are never created. But there are concrete node classes that inherit from it, namely: `Text` for text nodes, `Element` for element nodes and more exotic ones like `Comment` for comment nodes. -- [Element](http://dom.spec.whatwg.org/#interface-element) -- is a base class for DOM elements. It provides element-level navigation like `nextElementSibling`, `children` and searching methods like `getElementsByTagName`, `querySelector`. A browser supports not only HTML, but also XML and SVG. The `Element` class serves as a base for more specific classes: `SVGElement`, `XMLElement` and `HTMLElement`. -- [HTMLElement](https://html.spec.whatwg.org/multipage/dom.html#htmlelement) -- is finally the basic class for all HTML elements. It is inherited by concrete HTML elements: - - [HTMLInputElement](https://html.spec.whatwg.org/multipage/forms.html#htmlinputelement) -- the class for `` elements, - - [HTMLBodyElement](https://html.spec.whatwg.org/multipage/semantics.html#htmlbodyelement) -- the class for `` elements, - - [HTMLAnchorElement](https://html.spec.whatwg.org/multipage/semantics.html#htmlanchorelement) -- the class for `` elements, - - ...and so on, each tag has its own class that may provide specific properties and methods. +- [EventTarget](https://dom.spec.whatwg.org/#eventtarget) -- es la clase raíz "abstracta". Los objetos de esa clase nunca se crean. Sirve como base, por lo que todos los nodos DOM soportan los llamados "eventos", los estudiaremos más adelante. +- [Node](http://dom.spec.whatwg.org/#interface-node) -- también es una clase "abstracta", que sirve como base para los nodos DOM. Proporciona la funcionalidad del árbol principal: `parentNode`, `nextSibling`, `childNodes` y así sucesivamente (son getters). Los objetos de la clase `Node` nunca se crean. Pero hay clases de nodos concretas que heredan de él, a saber: `Text` para nodos de texto, `Element` para nodos de elementos y otros más exóticos como `Comment` para nodos de comentarios. +- [Element](http://dom.spec.whatwg.org/#interface-element) -- es una clase base para elementos DOM. Proporciona navegación a nivel de elemento como `nextElementSibling`, `children` y métodos de búsqueda como `getElementsByTagName`, `querySelector`. Un navegador admite no solo HTML, sino también XML y SVG. La clase `Element` sirve como base para clases más específicas: `SVGElement`, `XMLElement` y `HTMLElement`. +- [HTMLElement](https://html.spec.whatwg.org/multipage/dom.html#htmlelement) -- es finalmente la clase básica para todos los elementos HTML. Es heredado por elementos HTML concretos: + - [HTMLInputElement](https://html.spec.whatwg.org/multipage/forms.html#htmlinputelement) -- la clase para elementos ``, + - [HTMLBodyElement](https://html.spec.whatwg.org/multipage/semantics.html#htmlbodyelement) -- la clase para los elementos ``, + - [HTMLAnchorElement](https://html.spec.whatwg.org/multipage/semantics.html#htmlanchorelement) -- la clase para elementos ``, + - ...y así sucesivamente, cada etiqueta tiene su propia clase que puede proporcionar propiedades y métodos específicos. -So, the full set of properties and methods of a given node comes as the result of the inheritance. +Entonces, el conjunto completo de propiedades y métodos de un nodo dado viene como resultado de la herencia. -For example, let's consider the DOM object for an `` element. It belongs to [HTMLInputElement](https://html.spec.whatwg.org/multipage/forms.html#htmlinputelement) class. +Por ejemplo, consideremos el objeto DOM para un elemento ``. Pertenece a la clase [HTMLInputElement](https://html.spec.whatwg.org/multipage/forms.html#htmlinputelement). -It gets properties and methods as a superposition of (listed in inheritance order): +Obtiene propiedades y métodos como una superposición de (enumerados en orden de herencia): -- `HTMLInputElement` -- this class provides input-specific properties, -- `HTMLElement` -- it provides common HTML element methods (and getters/setters), -- `Element` -- provides generic element methods, -- `Node` -- provides common DOM node properties, -- `EventTarget` -- gives the support for events (to be covered), -- ...and finally it inherits from `Object`, so "plain object" methods like `hasOwnProperty` are also available. +- `HTMLInputElement` -- esta clase proporciona propiedades específicas de entrada, +- `HTMLElement` -- proporciona métodos de elementos HTML comunes (y getters/setters), +- `Element` -- proporciona métodos de elementos genéricos, +- `Node` -- proporciona propiedades comunes del nodo DOM, +- `EventTarget` -- da el apoyo para eventos (a cubrir), +- ...y finalmente hereda de `Object`, por lo que también están disponibles métodos de "objeto simple" como `hasOwnProperty`. -To see the DOM node class name, we can recall that an object usually has the `constructor` property. It references the class constructor, and `constructor.name` is its name: +Para ver el nombre de la clase del nodo DOM, podemos recordar que un objeto generalmente tiene la propiedad `constructor`. Hace referencia al constructor de la clase, y `constructor.name` es su nombre: ```js run alert( document.body.constructor.name ); // HTMLBodyElement ``` -...Or we can just `toString` it: +...O podemos simplemente usar `toString`: ```js run alert( document.body ); // [object HTMLBodyElement] ``` -We also can use `instanceof` to check the inheritance: +También podemos usar `instanceof` para verificar la herencia: ```js run alert( document.body instanceof HTMLBodyElement ); // true @@ -62,38 +62,38 @@ 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. +Como podemos ver, los nodos DOM son objetos regulares de JavaScript. Usan clases basadas en prototipos para la herencia. -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. +Eso también es fácil de ver al generar un elemento con `console.dir(elem)` en un navegador. Allí, en la consola, puede ver `HTMLElement.prototype`, `Element.prototype` y así sucesivamente. ```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 mayoría de los navegadores admiten dos comandos en sus herramientas de desarrollo: `console.log` y `console.dir`. Envían sus argumentos a la consola. Para los objetos JavaScript, estos comandos suelen hacer lo mismo. -But for DOM elements they are different: +Pero para los elementos DOM son diferentes: -- `console.log(elem)` shows the element DOM tree. -- `console.dir(elem)` shows the element as a DOM object, good to explore its properties. +- `console.log(elem)` muestra el árbol DOM del elemento. +- `console.dir(elem)` muestra el elemento como un objeto DOM, es bueno para explorar sus propiedades. -Try it on `document.body`. +Inténtalo en `document.body`. ``` -````smart header="IDL in the spec" -In the specification, DOM classes aren't described by using JavaScript, but a special [Interface description language](https://en.wikipedia.org/wiki/Interface_description_language) (IDL), that is usually easy to understand. +````smart header="IDL en la especificación" +En la especificación, las clases DOM no se describen mediante JavaScript, sino con un [Lenguaje de descripción de interfaz](https://es.wikipedia.org/wiki/Lenguaje_de_descripci%C3%B3n_de_interfaz) (IDL) especial, que suele ser fácil de entender. -In IDL all properties are prepended with their types. For instance, `DOMString`, `boolean` and so on. +En IDL, todas las propiedades están precedidas por sus tipos. Por ejemplo, `DOMString`, `boolean` y así sucesivamente. -Here's an excerpt from it, with comments: +Aquí hay un extracto, con comentarios: ```js -// Define HTMLInputElement +// Definir HTMLInputElement *!* -// The colon ":" means that HTMLInputElement inherits from HTMLElement +// Los dos puntos ":" significan que HTMLInputElement hereda de HTMLElement */!* interface HTMLInputElement: HTMLElement { - // here go properties and methods of elements + // aquí van las propiedades y métodos de los elementos *!* - // "DOMString" means that the value of a property is a string + // "DOMString" significa que el valor de una propiedad es un string */!* attribute DOMString accept; attribute DOMString alt; @@ -101,12 +101,12 @@ interface HTMLInputElement: HTMLElement { attribute DOMString value; *!* - // boolean value property (true/false) + // Propiedad de valor booleano (true/false) attribute boolean autofocus; */!* ... *!* - // now the method: "void" means that the method returns no value + // ahora el método: "void" significa que el método no devuelve ningún valor */!* void select(); ... @@ -114,342 +114,342 @@ interface HTMLInputElement: HTMLElement { ``` ```` -## The "nodeType" property +## La propiedad "nodeType" -The `nodeType` property provides one more, "old-fashioned" way to get the "type" of a DOM node. +La propiedad `nodeType` proporciona una forma "anticuada" más de obtener el "tipo" de un nodo DOM. -It has a numeric value: -- `elem.nodeType == 1` for element nodes, -- `elem.nodeType == 3` for text nodes, -- `elem.nodeType == 9` for the document object, -- there are few other values in [the specification](https://dom.spec.whatwg.org/#node). +Tiene un valor numérico: +- `elem.nodeType == 1` para nodos de elementos, +- `elem.nodeType == 3` para nodos de texto, +- `elem.nodeType == 9` para el objeto de documento, +- hay algunos otros valores en [la especificación](https://dom.spec.whatwg.org/#node). -For instance: +Por ejemplo: ```html run ``` -In modern scripts, we can use `instanceof` and other class-based tests to see the node type, but sometimes `nodeType` may be simpler. We can only read `nodeType`, not change it. +En los scripts modernos, podemos usar `instanceof` y otras pruebas basadas en clases para ver el tipo de nodo, pero a veces `nodeType` puede ser más simple. Solo podemos leer `nodeType`, no cambiarlo. -## Tag: nodeName and tagName +## Tag: nodeName y tagName -Given a DOM node, we can read its tag name from `nodeName` or `tagName` properties: +Dado un nodo DOM, podemos leer su nombre de etiqueta en las propiedades de `nodeName` o `tagName`: -For instance: +Por ejemplo: ```js run alert( document.body.nodeName ); // BODY alert( document.body.tagName ); // BODY ``` -Is there any difference between `tagName` and `nodeName`? +¿Hay alguna diferencia entre `tagName` y `nodeName`? -Sure, the difference is reflected in their names, but is indeed a bit subtle. +Claro, la diferencia se refleja en sus nombres, pero de hecho es un poco sutil. -- The `tagName` property exists only for `Element` nodes. -- The `nodeName` is defined for any `Node`: - - for elements it means the same as `tagName`. - - for other node types (text, comment, etc.) it has a string with the node type. +- La propiedad `tagName` existe solo para los nodos `Element`. +- El `nodeName` se define para cualquier `Node`: + - para los elementos, significa lo mismo que `tagName`. + - para otros tipos de nodo (texto, comentario, etc.) tiene una cadena con el tipo de nodo. -In other words, `tagName` is only supported by element nodes (as it originates from `Element` class), while `nodeName` can say something about other node types. +En otras palabras, `tagName` solo es compatible con los nodos de elementos (ya que se origina en la clase `Element`), mientras que `nodeName` puede decir algo sobre otros tipos de nodos. -For instance, let's compare `tagName` and `nodeName` for the `document` and a comment node: +Por ejemplo, comparemos `tagName` y `nodeName` para `document` y un nodo de comentario: ```html run - + ``` -If we only deal with elements, then we can use both `tagName` and `nodeName` - there's no difference. +Si solo tratamos con elementos, entonces podemos usar tanto `tagName` como `nodeName` - no hay diferencia. -```smart header="The tag name is always uppercase except in XML mode" -The browser has two modes of processing documents: HTML and XML. Usually the HTML-mode is used for webpages. XML-mode is enabled when the browser receives an XML-document with the header: `Content-Type: application/xml+xhtml`. +```smart header="El nombre de la etiqueta siempre está en mayúsculas, excepto en el modo XML" +El navegador tiene dos modos de procesar documentos: HTML y XML. Por lo general, el modo HTML se usa para páginas web. El modo XML está habilitado cuando el navegador recibe un documento XML con el encabezado: `Content-Type: application/xml+xhtml`. -In HTML mode `tagName/nodeName` is always uppercased: it's `BODY` either for `` or ``. +En el modo HTML, `tagName/nodeName` siempre está en mayúsculas: es `BODY` ya sea para `` o ``. -In XML mode the case is kept "as is". Nowadays XML mode is rarely used. +En el modo XML, el caso se mantiene "tal cual". Hoy en día, el modo XML rara vez se usa. ``` -## innerHTML: the contents +## innerHTML: los contenidos -The [innerHTML](https://w3c.github.io/DOM-Parsing/#widl-Element-innerHTML) property allows to get the HTML inside the element as a string. +La propiedad [innerHTML](https://w3c.github.io/DOM-Parsing/#widl-Element-innerHTML) permite obtener el HTML dentro del elemento como un string. -We can also modify it. So it's one of the most powerful ways to change the page. +También podemos modificarlo. Así que es una de las formas más poderosas de cambiar la página. -The example shows the contents of `document.body` and then replaces it completely: +El ejemplo muestra el contenido de `document.body` y luego lo reemplaza por completo: ```html run -

    A paragraph

    -
    A div
    +

    Un párrafo

    +
    Un div
    ``` -We can try to insert invalid HTML, the browser will fix our errors: +Podemos intentar insertar HTML no válido, el navegador corregirá nuestros errores: ```html run ``` -```smart header="Scripts don't execute" -If `innerHTML` inserts a ` ``` -**Beware: unlike `innerHTML`, writing to `outerHTML` does not change the element. Instead, it replaces it in the DOM.** +**Cuidado: a diferencia de `innerHTML`, escribir en `outerHTML` no cambia el elemento. En cambio, lo reemplaza en el DOM.** -Yeah, sounds strange, and strange it is, that's why we make a separate note about it here. Take a look. +Sí, suena extraño, y es extraño, por eso hacemos una nota aparte al respecto aquí. Echa un vistazo. -Consider the example: +Considera el ejemplo: ```html run -
    Hello, world!
    +
    ¡Hola, mundo!
    ``` -Looks really odd, right? +Parece realmente extraño, ¿verdad? -In the line `(*)` we replaced `div` with `

    A new element

    `. In the outer document (the DOM) we can see the new content instead of the `
    `. But, as we can see in line `(**)`, the value of the old `div` variable hasn't changed! +En la línea `(*)` reemplazamos `div` con `

    Un nuevo elemento

    `. En el documento externo (el DOM) podemos ver el nuevo contenido en lugar del `
    `. Pero, como podemos ver en la línea `(**)`, ¡el valor de la antigua variable `div` no ha cambiado! -The `outerHTML` assignment does not modify the DOM element (the object referenced by, in this case, the variable 'div'), but removes it from the DOM and inserts the new HTML in its place. +La asignación `outerHTML` no modifica el elemento DOM (el objeto al que hace referencia, en este caso, la variable 'div'), pero lo elimina del DOM e inserta el nuevo HTML en su lugar. -So what happened in `div.outerHTML=...` is: -- `div` was removed from the document. -- Another piece of HTML `

    A new element

    ` was inserted in its place. -- `div` still has its old value. The new HTML wasn't saved to any variable. +Entonces, lo que sucedió en `div.outerHTML=...` es: +- `div` fue eliminado del documento. +- Otro fragmento de HTML `

    Un nuevo elemento

    ` se insertó en su lugar. +- `div` todavía tiene su antiguo valor. El nuevo HTML no se guardó en ninguna variable. -It's so easy to make an error here: modify `div.outerHTML` and then continue to work with `div` as if it had the new content in it. But it doesn't. Such thing is correct for `innerHTML`, but not for `outerHTML`. +Es muy fácil cometer un error aquí: modificar `div.outerHTML` y luego continuar trabajando con `div` como si tuviera el nuevo contenido. Pero no es así. Esto es correcto para `innerHTML`, pero no para `outerHTML`. -We can write to `elem.outerHTML`, but should keep in mind that it doesn't change the element we're writing to ('elem'). It puts the new HTML in its place instead. We can get references to the new elements by querying the DOM. +Podemos escribir en `elem.outerHTML`, pero debemos tener en cuenta que no cambia el elemento en el que estamos escribiendo ('elem'). En su lugar, coloca el nuevo HTML en su lugar. Podemos obtener referencias a los nuevos elementos consultando el DOM. -## nodeValue/data: text node content +## nodeValue/data: contenido del nodo de texto -The `innerHTML` property is only valid for element nodes. +La propiedad `innerHTML` solo es válida para los nodos de elementos. -Other node types, such as text nodes, have their counterpart: `nodeValue` and `data` properties. These two are almost the same for practical use, there are only minor specification differences. So we'll use `data`, because it's shorter. +Otros tipos de nodos, como los nodos de texto, tienen su contraparte: propiedades `nodeValue` y `data`. Estas dos son casi iguales para uso práctico, solo hay pequeñas diferencias de especificación. Entonces usaremos `data`, porque es más corto. -An example of reading the content of a text node and a comment: +Un ejemplo de lectura del contenido de un nodo de texto y un comentario: ```html run height="50" - Hello - + Hola + ``` -For text nodes we can imagine a reason to read or modify them, but why comments? +Para los nodos de texto podemos imaginar una razón para leerlos o modificarlos, pero ¿por qué comentarios? -Sometimes developers embed information or template instructions into HTML in them, like this: +A veces, los desarrolladores incorporan información o instrucciones de plantilla en HTML, así: ```html -
    Welcome, Admin!
    +
    ¡Bienvenido, administrador!
    ``` -...Then JavaScript can read it from `data` property and process embedded instructions. +...Entonces JavaScript puede leerlo desde la propiedad `data` y procesar las instrucciones integradas. -## textContent: pure text +## textContent: texto puro -The `textContent` provides access to the *text* inside the element: only text, minus all ``. +El `textContent` proporciona acceso al *texto* dentro del elemento: solo texto, menos todas las ``. -For instance: +Por ejemplo: ```html run
    -

    Headline!

    -

    Martians attack people!

    +

    ¡Titular!

    +

    ¡Los marcianos atacan a la gente!

    ``` -As we can see, only text is returned, as if all `` were cut out, but the text in them remained. +Como podemos ver, solo se devuelve texto, como si todas las `` fueran recortadas, pero el texto en ellas permaneció. -In practice, reading such text is rarely needed. +En la práctica, rara vez se necesita leer este tipo de texto. -**Writing to `textContent` is much more useful, because it allows to write text the "safe way".** +**Escribir en `textContent` es mucho más útil, porque permite escribir texto de "forma segura".** -Let's say we have an arbitrary string, for instance entered by a user, and want to show it. +Digamos que tenemos un string arbitrario, por ejemplo, ingresado por un usuario, y queremos mostrarlo. -- With `innerHTML` we'll have it inserted "as HTML", with all HTML tags. -- With `textContent` we'll have it inserted "as text", all symbols are treated literally. +- Con `innerHTML` lo tendremos insertado "como HTML", con todas las etiquetas HTML. +- Con `textContent` lo tendremos insertado "como texto", todos los símbolos se tratan literalmente. -Compare the two: +Compara los dos: ```html run
    ``` -1. The first `
    ` gets the name "as HTML": all tags become tags, so we see the bold name. -2. The second `
    ` gets the name "as text", so we literally see `Winnie-the-pooh!`. +1. El primer `
    ` obtiene el nombre "como HTML": todas las etiquetas se convierten en etiquetas, por lo que vemos el nombre en negrita. +2. El segundo `
    ` obtiene el nombre "como texto", así que literalmente vemos `¡Winnie-pooh!`. -In most cases, we expect the text from a user, and want to treat it as text. We don't want unexpected HTML in our site. An assignment to `textContent` does exactly that. +En la mayoría de los casos, esperamos el texto de un usuario y queremos tratarlo como texto. No queremos HTML inesperado en nuestro sitio. Una asignación a `textContent` hace exactamente eso. -## The "hidden" property +## La propiedad "hidden" -The "hidden" attribute and the DOM property specifies whether the element is visible or not. +El atributo "hidden" y la propiedad DOM especifican si el elemento es visible o no. -We can use it in HTML or assign using JavaScript, like this: +Podemos usarlo en HTML o asignarlo usando JavaScript, así: ```html run height="80" -
    Both divs below are hidden
    +
    Ambos divs a continuación están ocultos
    - + -
    JavaScript assigned the property "hidden"
    +
    JavaScript asignó la propiedad "hidden"
    ``` -Technically, `hidden` works the same as `style="display:none"`. But it's shorter to write. +Técnicamente, `hidden` funciona igual que `style="display:none"`. Pero es más corto de escribir. -Here's a blinking element: +Aquí hay un elemento parpadeante: ```html run height=50 -
    A blinking element
    +
    Un elemento parpadeante
    ``` -## More properties +## Más propiedades -DOM elements also have additional properties, in particular those that depend on the class: +Los elementos DOM también tienen propiedades adicionales, en particular aquellas que dependen de la clase: -- `value` -- the value for ``, `