Skip to content
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

Searching: getElement*, querySelector* #432

Merged
merged 2 commits into from
Feb 28, 2024
Merged

Searching: getElement*, querySelector* #432

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
525b031
it updates search element dom article
danilolmc Feb 7, 2024
d7b7698
undoes unnecessary translation
danilolmc Feb 27, 2024
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
29 changes: 15 additions & 14 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,36 @@
There are many ways to do it.

Here are some of them:
Existem muitas maneiras de fazer isso.

Aqui estão algumas delas:

```js
// 1. The table with `id="age-table"`.
// 1. A tabela com `id="age-table"`.
let table = document.getElementById('age-table')

// 2. All label elements inside that table
// 2. Todos os elementos label dentro dessa tabela
table.getElementsByTagName('label')
// or
// ou
document.querySelectorAll('#age-table label')

// 3. The first td in that table (with the word "Age")
// 3. O primeiro td nessa tabela (com a palavra "Idade")
table.rows[0].cells[0]
// or
// ou
table.getElementsByTagName('td')[0]
// or
// ou
table.querySelector('td')

// 4. The form with the name "search"
// assuming there's only one element with name="search" in the document
// 4. O formulário com o nome "search"
// assumindo que existe apenas um elemento com name="search" no documento
let form = document.getElementsByName('search')[0]
// or, form specifically
// ou, especificamente, o formulário
document.querySelector('form[name="search"]')

// 5. The first input in that form.
// 5. O primeiro input nesse formulário.
form.getElementsByTagName('input')[0]
// or
// ou
form.querySelector('input')

// 6. The last input in that form
// 6. O último input nesse formulário
let inputs = form.querySelectorAll('input') // find all inputs
inputs[inputs.length-1] // take the last one
```
14 changes: 7 additions & 7 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>Pesquise o local:
<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:
Pesquise os visitantes:
<table id="age-table">
<tr>
<td>Age:</td>
<td>Idade:</td>
<td id="age-list">
<label>
<input type="radio" name="age" value="young">less than 18</label>
<input type="radio" name="age" value="young">menos de 18</label>
<label>
<input type="radio" name="age" value="mature">18-50</label>
<input type="radio" name="age" value="mature">entre 18 e 50</label>
<label>
<input type="radio" name="age" value="senior">more than 50</label>
<input type="radio" name="age" value="senior">mais de 50</label>
</td>
</tr>

<tr>
<td>Additionally:</td>
<td>Adicionalmente:</td>
<td>
<input type="text" name="info[0]">
<input type="text" name="info[1]">
Expand Down
20 changes: 10 additions & 10 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,17 @@ importance: 4

---

# Search for elements
# Procurar por elementos

Here's the document with the table and form.
Aqui está o documento com a tabela e o formulário.

How to find?...
Como encontrar?...

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.
1. A tabela com `id="age-table"`.
2. Todos os elementos `label` dentro dessa tabela (deveriam ser 3 deles).
3. O primeiro `td` nessa tabela (com a palavra "Idade").
4. O `form` com `name="search"`.
5. O primeiro `input` nesse formulário.
6. O último `input` nesse formulário.

Open the page [table.html](table.html) in a separate window and make use of browser tools for that.
Abra a página [table.html](table.html) em uma janela separada e use as ferramentas do navegador para isso.
Loading