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.

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
Show file tree
Hide file tree
Changes from all commits
Commits
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
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 resolverlo.

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
```
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
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
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy