- Additionally:
+ Más:
diff --git a/2-ui/1-document/04-searching-elements-dom/1-find-elements/task.md b/2-ui/1-document/04-searching-elements-dom/1-find-elements/task.md
index f0b54beac..d93a27392 100644
--- a/2-ui/1-document/04-searching-elements-dom/1-find-elements/task.md
+++ b/2-ui/1-document/04-searching-elements-dom/1-find-elements/task.md
@@ -2,17 +2,16 @@ importance: 4
---
-# Search for elements
+# Buscar elementos
+Aquí está el documento con la tabla y el formulario.
-Here's the document with the table and form.
+¿Cómo encontrar?...
-How to find?...
+1. La tabla con `id="age-table"`.
+2. Todos los elementos `label`dentro de la tabla (debería haber 3).
+3. El primer `td` en la tabla (con la palabra "Age").
+4. El `form` con `name="search"`.
+5. El primer `input` en ese formulario.
+6. El último `input` en ese formulario.
-1. The table with `id="age-table"`.
-2. All `label` elements inside that table (there should be 3 of them).
-3. The first `td` in that table (with the word "Age").
-4. The `form` with `name="search"`.
-5. The first `input` in that form.
-6. The last `input` in that form.
-
-Open the page [table.html](table.html) in a separate window and make use of browser tools for that.
+Abra la página [table.html](table.html) en una ventana separada y haga uso de las herramientas del navegador.
diff --git a/2-ui/1-document/04-searching-elements-dom/article.md b/2-ui/1-document/04-searching-elements-dom/article.md
index f5ab0b785..8ca9425d9 100644
--- a/2-ui/1-document/04-searching-elements-dom/article.md
+++ b/2-ui/1-document/04-searching-elements-dom/article.md
@@ -1,93 +1,93 @@
-# Searching: getElement*, querySelector*
+# Buscar: getElement*, querySelector*
-DOM navigation properties are great when elements are close to each other. What if they are not? How to get an arbitrary element of the page?
+Las propiedades de navegación del DOM son ideales cuando los elementos están cerca unos de otros. Pero, ¿y si no lo están? ¿Cómo obtener un elemento arbitrario de la página?
-There are additional searching methods for that.
+Para estos casos existen métodos de búsqueda adicionales.
-## document.getElementById or just id
+## document.getElementById o sólo id
-If an element has the `id` attribute, we can get the element using the method `document.getElementById(id)`, no matter where it is.
+Si un elemento tiene el atributo `id`, podemos obtener el elemento usando el método `document.getElementById(id)`, sin importar dónde se encuentre.
-For instance:
+Por ejemplo:
```html run
```
-Also, there's a global variable named by `id` that references the element:
+Existe además una variable global nombrada por el `id` que hace referencia al elemento:
```html run
```
-...That's unless we declare a JavaScript variable with the same name, then it takes precedence:
+...Esto es a menos que declaremos una variable de JavaScript con el mismo nombre, entonces ésta tiene prioridad:
```html run untrusted height=0
```
-```warn header="Please don't use id-named global variables to access elements"
-This behavior is described [in the specification](http://www.whatwg.org/specs/web-apps/current-work/#dom-window-nameditem), so it's kind of standard. But it is supported mainly for compatibility.
+```warn header="Por favor, no utilice variables globales nombradas por id para acceder a los elementos"
+Este comportamiento se encuentra descrito [en la especificación](http://www.whatwg.org/specs/web-apps/current-work/#dom-window-nameditem), por lo que es una especie de estándar. Pero está soportado principalmente para compatibilidad.
-The browser tries to help us by mixing namespaces of JS and DOM. That's fine for simple scripts, inlined into HTML, but generally isn't a good thing. There may be naming conflicts. Also, when one reads JS code and doesn't have HTML in view, it's not obvious where the variable comes from.
+El navegador intenta ayudarnos mezclando espacios de nombres (*namespaces*) de JS y DOM. Esto está bien para los scripts simples, incrustrados en HTML, pero generalmente no es una buena práctica. Puede haber conflictos de nombres. Además, cuando uno lee el código de JS y no tiene el HTML a la vista, no es obvio de dónde viene la variable.
-Here in the tutorial we use `id` to directly reference an element for brevity, when it's obvious where the element comes from.
+Aquí en el tutorial usamos `id` para referirnos directamente a un elemento por brevedad, cuando es obvio de dónde viene el elemento.
-In real life `document.getElementById` is the preferred method.
+En la vida real `document.getElementById` es el método preferente.
```
-```smart header="The `id` must be unique"
-The `id` must be unique. There can be only one element in the document with the given `id`.
+```smart header="El `id` debe ser único"
+El `id` debe ser único. Sólo puede haber en todo el documento un elemento con un `id` determinado.
-If there are multiple elements with the same `id`, then the behavior of methods that use it is unpredictable, e.g. `document.getElementById` may return any of such elements at random. So please stick to the rule and keep `id` unique.
+Si hay múltiples elementos con el mismo id, entonces el comportamiento de los métodos que lo usan es impredecible, por ejemplo `document.getElementById` puede devolver cualquiera de esos elementos al azar. Así que, por favor, sigan la regla y mantengan el `id` único.
```
-```warn header="Only `document.getElementById`, not `anyElem.getElementById`"
-The method `getElementById` that can be called only on `document` object. It looks for the given `id` in the whole document.
+```warn header="Sólo `document.getElementById`, no `anyElem.getElementById`"
+El método `getElementById` sólo puede ser llamado en el objeto `document`. Busca el `id` dado en todo el documento.
```
## querySelectorAll [#querySelectorAll]
-By far, the most versatile method, `elem.querySelectorAll(css)` returns all elements inside `elem` matching the given CSS selector.
+Sin duda el método más versátil, `elem.querySelectorAll(css)` devuelve todos los elementos dentro de `elem` que coinciden con el selector CSS dado.
-Here we look for all `` elements that are last children:
+Aquí buscamos todos los elementos ` ` que son los últimos hijos:
```html run
- The
- test
+ La
+ prueba
- has
- passed
+ ha
+ pasado/li>
```
-This method is indeed powerful, because any CSS selector can be used.
+Este método es muy poderoso, porque se puede utilizar cualquier selector de CSS.
-```smart header="Can use pseudo-classes as well"
-Pseudo-classes in the CSS selector like `:hover` and `:active` are also supported. For instance, `document.querySelectorAll(':hover')` will return the collection with elements that the pointer is over now (in nesting order: from the outermost `` to the most nested one).
+```smart header="También se pueden usar pseudoclases"
+Las pseudoclases como `:hover` (cuando el cursor sobrevuela el elemento) y `:active` (cuando hace clic con el botón principal) también son soportadas. Por ejemplo, `document.querySelectorAll(':hover')` devolverá una colección de elementos sobre los que el puntero hace hover en ese momento (en orden de anidación: desde el más exterior `` hasta el más anidado).
```
## querySelector [#querySelector]
-The call to `elem.querySelector(css)` returns the first element for the given CSS selector.
+La llamada a `elem.querySelector(css)` devuelve el primer elemento para el selector CSS dado.
-In other words, the result is the same as `elem.querySelectorAll(css)[0]`, but the latter is looking for *all* elements and picking one, while `elem.querySelector` just looks for one. So it's faster and also shorter to write.
+En otras palabras, el resultado es el mismo que `elem.querySelectorAll(css)[0]`, pero este último busca *todos* los elementos y elige uno, mientras que `elem.querySelector` sólo busca uno. Así que es más rápido y también más corto de escribir.
## matches
-Previous methods were searching the DOM.
+Los métodos anteriores consistían en buscar en el DOM.
-The [elem.matches(css)](http://dom.spec.whatwg.org/#dom-element-matches) does not look for anything, it merely checks if `elem` matches the given CSS-selector. It returns `true` or `false`.
+El [elem.matches(css)](http://dom.spec.whatwg.org/#dom-element-matches) no busca nada, sólo comprueba si el `elem` coincide con el selector CSS dado. Devuelve `true` o `false`.
-The method comes in handy when we are iterating over elements (like in an array or something) and trying to filter out those that interest us.
+Este método es útil cuando estamos iterando sobre elementos (como en un array) y tratando de filtrar los que nos interesan.
-For instance:
+Por ejemplo:
```html run
...
...
@@ -140,21 +140,21 @@ For instance:
## closest
-*Ancestors* of an element are: parent, the parent of parent, its parent and so on. The ancestors together form the chain of parents from the element to the top.
+Los *ancestros* de un elmento son: el padre, el padre del padre, su padre y así sucesivamente. Todos los ancestros juntos forman la cadena de padres desde el elemento hasta la cima.
-The method `elem.closest(css)` looks the nearest ancestor that matches the CSS-selector. The `elem` itself is also included in the search.
+El método `elem.closest(css)` busca el ancestro más cercano que coincide con el selector CSS. El propio `elem` también se incluye en la búsqueda.
-In other words, the method `closest` goes up from the element and checks each of parents. If it matches the selector, then the search stops, and the ancestor is returned.
+En otras palabras, el método `closest` sube del elemento y comprueba cada uno de los padres. Si coincide con el selector, entonces la búsqueda se detiene y devuelve dicho ancestro.
-For instance:
+Por ejemplo:
```html run
-Contents
+Contenido
- Chapter 1
- Chapter 1
+ Capítulo 1
+ Capítulo 1
@@ -164,44 +164,44 @@ For instance:
alert(chapter.closest('.book')); // UL
alert(chapter.closest('.contents')); // DIV
- alert(chapter.closest('h1')); // null (because h1 is not an ancestor)
+ alert(chapter.closest('h1')); // null (porque h1 no es un ancestro)
```
## getElementsBy*
-There are also other methods to look for nodes by a tag, class, etc.
+También hay otros métodos que permiten buscar nodos por una etiqueta, una clase, etc.
-Today, they are mostly history, as `querySelector` is more powerful and shorter to write.
+Hoy en día, son en su mayoría historia, ya que `querySelector` es más poderoso y corto de escribir.
-So here we cover them mainly for completeness, while you can still find them in the old scripts.
+Aquí los cubrimos principalmente por completar el temario, aunque todavía se pueden encontrar en scripts antiguos.
-- `elem.getElementsByTagName(tag)` looks for elements with the given tag and returns the collection of them. The `tag` parameter can also be a star `"*"` for "any tags".
-- `elem.getElementsByClassName(className)` returns elements that have the given CSS class.
-- `document.getElementsByName(name)` returns elements with the given `name` attribute, document-wide. Very rarely used.
+- `elem.getElementsByTagName(tag)` busca elementos con la etiqueta dada y devuelve una colección con ellos. El parámetro `tag` también puede ser un asterisco `"*"` para "cualquier etiqueta".
+- `elem.getElementsByClassName(className)` devuelve elementos con la clase dada.
+- `document.getElementsByName(name)` devuelve elementos con el atributo `name` dado, en todo el documento. Muy raramente usado.
-For instance:
+Por ejemplo:
```js
-// get all divs in the document
+// obtener todos los divs del documento
let divs = document.getElementsByTagName('div');
```
-Let's find all `input` tags inside the table:
+Para encontrar todas las etiquetas `input` dentro de una tabla:
```html run height=50
- Your age:
+ Su edad:
- less than 18
+ menos de 18
- from 18 to 50
+ de 18 a 50
- more than 60
+ más de 60
@@ -218,66 +218,66 @@ Let's find all `input` tags inside the table:
```
-```warn header="Don't forget the `\"s\"` letter!"
-Novice developers sometimes forget the letter `"s"`. That is, they try to call `getElementByTagName` instead of getElements ByTagName
.
+```warn header="¡No olvides la letra `\"s\"`!"
+Los desarrolladores novatos a veces olvidan la letra `"s"`. Esto es, intentan llamar a `getElementByTagName` en vez de a getElements ByTagName
.
-The `"s"` letter is absent in `getElementById`, because it returns a single element. But `getElementsByTagName` returns a collection of elements, so there's `"s"` inside.
+La letra `"s"` no se encuentra en `getElementById` porque devuelve sólo un elemento. But `getElementsByTagName` devuelve una colección de elementos, de ahí que tenga la `"s"`.
```
-````warn header="It returns a collection, not an element!"
-Another widespread novice mistake is to write:
+````warn header="¡Devuelve una colección, no un elemento!"
+Otro error muy extendido entre los desarrolladores novatos es escribir:
```js
-// doesn't work
+// no funciona
document.getElementsByTagName('input').value = 5;
```
-That won't work, because it takes a *collection* of inputs and assigns the value to it rather than to elements inside it.
+Esto no funcionará, porque toma una *colección* de inputs y le asigna el valor a ella en lugar de a los elementos dentro de ella.
-We should either iterate over the collection or get an element by its index, and then assign, like this:
+En dicho caso, deberíamos iterar sobre la colección o conseguir un elemento por su índice y luego asignarlo así:
```js
-// should work (if there's an input)
+// debería funcionar (si hay un input)
document.getElementsByTagName('input')[0].value = 5;
```
````
-Looking for `.article` elements:
+Buscando elementos `.article`:
```html run height=50
```
-## Live collections
+## Colecciones vivas
-All methods `"getElementsBy*"` return a *live* collection. Such collections always reflect the current state of the document and "auto-update" when it changes.
+Todos los métodos `"getElementsBy*"` devuelven una colección *viva* (*live collection*). Tales colecciones siempre reflejan el estado actual del documento y se "auto-actualizan" cuando cambia.
-In the example below, there are two scripts.
+En el siguiente ejemplo, hay dos scripts.
-1. The first one creates a reference to the collection of ``. As of now, its length is `1`.
-2. The second scripts runs after the browser meets one more `
`, so its length is `2`.
+1. El primero crea una referencia a la colección de `
`. Por ahora, su longitud es `1`.
+2. El segundo script se ejecuta después de que el navegador se encuentre con otro `
`, por lo que su longitud es de `2`.
```html run
-
First div
+
Primer div
-
Second div
+
Segundo div
```
-In contrast, `querySelectorAll` returns a *static* collection. It's like a fixed array of elements.
+Por el contrario, `querySelectorAll` devuelve una colección *estática*. Es como un array de elementos fijos.
-If we use it instead, then both scripts output `1`:
+Si lo utilizamos en lugar de `getElementsByTagName`, entonces ambos scripts dan como resultado `1`:
```html run
-
First div
+
Primer div
-
Second div
+
Segundo div
```
-Now we can easily see the difference. The static collection did not increase after the appearance of a new `div` in the document.
+Ahora podemos ver fácilmente la diferencia. La colección estática no aumentó después de la aparición de un nuevo `div` en el documento.
-## Summary
+## Resumen
-There are 6 main methods to search for nodes in DOM:
+Hay 6 métodos principales para buscar nodos en el DOM:
-Method
-Searches by...
-Can call on an element?
-Live?
+Método
+Busca por...
+¿Puede llamar a un elemento?
+¿Vivo?
querySelector
-CSS-selector
+selector CSS
✔
-
querySelectorAll
-CSS-selector
+selector CSS
✔
-
@@ -350,7 +350,7 @@ There are 6 main methods to search for nodes in DOM:
getElementsByTagName
-tag or '*'
+etiqueta o '*'
✔
✔
@@ -363,12 +363,12 @@ There are 6 main methods to search for nodes in DOM:
-By far the most used are `querySelector` and `querySelectorAll`, but `getElementBy*` can be sporadically helpful or found in the old scripts.
+Los más utilizados son `querySelector` y `querySelectorAll`, pero `getElementBy*` puede ser de ayuda esporádicamente o encontrarse en scripts antiguos.
-Besides that:
+Aparte de eso:
-- There is `elem.matches(css)` to check if `elem` matches the given CSS selector.
-- There is `elem.closest(css)` to look for the nearest ancestor that matches the given CSS-selector. The `elem` itself is also checked.
+- Existe `elem.matches(css)` para comprobar si `elem` coincide con el selector CSS dado.
+- Existe `elem.closest(css)` para buscar el ancestro más cercano que coincida con el selector CSS dado. El propio `elem` también se comprueba.
-And let's mention one more method here to check for the child-parent relationship, as it's sometimes useful:
-- `elemA.contains(elemB)` returns true if `elemB` is inside `elemA` (a descendant of `elemA`) or when `elemA==elemB`.
+Y mencionemos un método más para comprobar la relación hijo-padre, ya que a veces es útil:
+- `elemA.contains(elemB)` devuelve true si `elemB` está dentro de `elemA` (un descendiente de `elemA`) o cuando `elemA==elemB`.