From a7e09ce4a285bbbd74fbf8ad819a633b8ee7d521 Mon Sep 17 00:00:00 2001 From: Leired7 <47502241+Leired7@users.noreply.github.com> Date: Fri, 24 Jul 2020 16:14:04 +0200 Subject: [PATCH 01/24] Walking the DOM - Caminando por el DOM Traducido "Walking the DOM" --- 2-ui/1-document/03-dom-navigation/article.md | 208 +++++++++---------- 1 file changed, 104 insertions(+), 104 deletions(-) diff --git a/2-ui/1-document/03-dom-navigation/article.md b/2-ui/1-document/03-dom-navigation/article.md index f7123d70d..26b816bce 100644 --- a/2-ui/1-document/03-dom-navigation/article.md +++ b/2-ui/1-document/03-dom-navigation/article.md @@ -5,37 +5,37 @@ libs: --- -# Walking the DOM +# Caminando por el DOM -The DOM allows us to do anything with elements and their contents, but first we need to reach the corresponding DOM object. +El DOM nos permite hacer cualquier cosa con sus elementos y contenidos, pero lo primero que tenemos que hacer es llegar al objeto correspondiente objeto del DOM. -All operations on the DOM start with the `document` object. That's the main "entry point" to DOM. From it we can access any node. +Todas las operaciones en el DOM comienzan con el objeto `document`. Este es el principal "punto de entrada" al DOM. Desde ahí podremos acceder a cualquier nodo. -Here's a picture of links that allow for travel between DOM nodes: +Esta imagen representa los enlaces que nos permiten viajar a través de los nodos del DOM: ![](dom-links.svg) -Let's discuss them in more detail. +Vamos a analizarlos con más detalle. -## On top: documentElement and body +## En la parte superior: documentElement y body -The topmost tree nodes are available directly as `document` properties: +Los tres nodos superiores están disponibles como propiedades de `document`: `` = `document.documentElement` -: The topmost document node is `document.documentElement`. That's the DOM node of the `` tag. +: El nodo superior del documento es `document.documentElement`. Este es el nodo del DOM para la etiqueta ``. `` = `document.body` -: Another widely used DOM node is the `` element -- `document.body`. +: Otro nodo muy utilizado es el elemento `` -- `document.body`. `` = `document.head` -: The `` tag is available as `document.head`. +: La etiqueta `` está disponible como `document.head`. -````warn header="There's a catch: `document.body` can be `null`" -A script cannot access an element that doesn't exist at the moment of running. +````warn header="Hay una pega: `document.body` puede ser `null`" +Un script no puede acceder a un elemento que no existe en el momento de su ejecucción. -In particular, if a script is inside ``, then `document.body` is unavailable, because the browser did not read it yet. +Por ejemplo, si un script está dentro ``, entonces `document.body` no está disponible, porque el navegador no lo ha leído aún. -So, in the example below the first `alert` shows `null`: +Entonces, en el ejemplo inferior `alert` muestra `null`: ```html run @@ -59,18 +59,18 @@ So, in the example below the first `alert` shows `null`: ``` ```` -```smart header="In the DOM world `null` means \"doesn't exist\"" -In the DOM, the `null` value means "doesn't exist" or "no such node". +```smart header="En el mundo del DOM `null` significa \"no existe\"" +En el DOM, el valor `null` significa "no existe" o "no hay tal nodo". ``` -## Children: childNodes, firstChild, lastChild +## Hijos: childNodes, firstChild, lastChild -There are two terms that we'll use from now on: +Existen dos términos que vamos a utilizar de ahora en adelante: -- **Child nodes (or children)** -- elements that are direct children. In other words, they are nested exactly in the given one. For instance, `` and `` are children of `` element. -- **Descendants** -- all elements that are nested in the given one, including children, their children and so on. +- **Nodos hijos (o hijos)** -- elementos que son directamente hijos. En otras palabras, están anidados exactamente en el mismo lado. Por ejemplo, `` y `` son hijos del elemento ``. +- **Descendientes** -- todos los elementos anidados de un elemento dado, incluyendo los hijos, sus hijos y así sucesivamente. -For instance, here `` has children `
` and `