Skip to content

Searching: getElement*, querySelector* #311

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 19 commits into from
Jul 21, 2020
Merged

Searching: getElement*, querySelector* #311

Show file tree
Hide file tree
Changes from 12 commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
ce7cadc
Update article.md
elemarmar Jul 18, 2020
62f1599
Update article.md
elemarmar Jul 18, 2020
ddc5556
Update article.md
elemarmar Jul 20, 2020
0781af4
Update solution.md
elemarmar Jul 20, 2020
81db12d
Update task.md
elemarmar Jul 20, 2020
ba2e0a6
Update solution.md
elemarmar Jul 20, 2020
2a86f2f
Update table.html
elemarmar Jul 20, 2020
c236fc5
Update article.md
elemarmar Jul 20, 2020
29d49ac
Update article.md
elemarmar Jul 20, 2020
8aeac8a
Update solution.md
elemarmar Jul 20, 2020
c549aae
Update table.html
elemarmar Jul 20, 2020
c61abd1
Update article.md
elemarmar Jul 20, 2020
f22b840
Update 2-ui/1-document/04-searching-elements-dom/1-find-elements/solu…
elemarmar Jul 20, 2020
1f3fb3a
Update 2-ui/1-document/04-searching-elements-dom/article.md
elemarmar Jul 20, 2020
e9b1d5e
Update 2-ui/1-document/04-searching-elements-dom/article.md
elemarmar Jul 20, 2020
8c570c5
Update 2-ui/1-document/04-searching-elements-dom/article.md
elemarmar Jul 20, 2020
5edbfd0
Update 2-ui/1-document/04-searching-elements-dom/article.md
elemarmar Jul 20, 2020
269b5fa
Update 2-ui/1-document/04-searching-elements-dom/article.md
elemarmar Jul 21, 2020
ee7670b
Update 2-ui/1-document/04-searching-elements-dom/article.md
elemarmar Jul 21, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 13 additions & 13 deletions 2-ui/1-document/04-searching-elements-dom/1-find-elements/solution.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,35 +1,35 @@
There are many ways to do it.
Hay muchas maneras de resolvero.

Here are some of them:
Aquí hay algunas de ellas:

```js
// 1. The table with `id="age-table"`.
// 1. La tabla con `id="age-table"`.
let table = document.getElementById('age-table')

// 2. All label elements inside that table
// 2. Todos los elementos `label` dentro de esa tabla
table.getElementsByTagName('label')
// or
document.querySelectorAll('#age-table label')

// 3. The first td in that table (with the word "Age")
// 3. El primer `td` en la tabla (con la palabra "Age")
table.rows[0].cells[0]
// or
table.getElementsByTagName('td')[0]
// or
table.querySelector('td')

// 4. The form with the name "search"
// assuming there's only one element with name="search" in the document
// 4. El `form` con name="search"
// suponiendo que sólo hay un elemento con name="search" en el documento
let form = document.getElementsByName('search')[0]
// or, form specifically
//o, utilizando el form específicamente
document.querySelector('form[name="search"]')

// 5. The first input in that form.
// 5. El primer input en el form.
form.getElementsByTagName('input')[0]
// or
// o
form.querySelector('input')

// 6. The last input in that form
let inputs = form.querySelectorAll('input') // find all inputs
inputs[inputs.length-1] // take the last one
// 6. El último input en el form.
let inputs = form.querySelectorAll('input') // encontrar todos los inputs
inputs[inputs.length-1] // obtener el último
```
12 changes: 6 additions & 6 deletions 2-ui/1-document/04-searching-elements-dom/1-find-elements/table.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<html>
<body>
<form name="search">
<label>Search the site:
<label>Buscar en la página:
<input type="text" name="search">
</label>
<input type="submit" value="Search!">
Expand All @@ -11,22 +11,22 @@
<hr>

<form name="search-person">
Search the visitors:
Buscar a los visitantes:
<table id="age-table">
<tr>
<td>Age:</td>
<td>Edad:</td>
<td id="age-list">
<label>
<input type="radio" name="age" value="young">less than 18</label>
<input type="radio" name="age" value="young">menor de 18</label>
<label>
<input type="radio" name="age" value="mature">18-50</label>
<label>
<input type="radio" name="age" value="senior">more than 50</label>
<input type="radio" name="age" value="senior">mayor de 50</label>
</td>
</tr>

<tr>
<td>Additionally:</td>
<td>Más:</td>
<td>
<input type="text" name="info[0]">
<input type="text" name="info[1]">
Expand Down
21 changes: 10 additions & 11 deletions 2-ui/1-document/04-searching-elements-dom/1-find-elements/task.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Loading