Skip to content

Searching: getElement*, querySelector* #390

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 3 commits into from
Oct 13, 2022
Merged

Searching: getElement*, querySelector* #390

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
603b8a4
v1
jonathangraff Jul 13, 2022
e8c90b7
Finished version
jonathangraff Jul 13, 2022
4fc9247
Final version
jonathangraff Jul 20, 2022
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
33 changes: 16 additions & 17 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,34 @@
There are many ways to do it.

Here are some of them:
Il existe plusieurs façons de faire :
En voici quelques unes :

```js
// 1. The table with `id="age-table"`.
// 1. Le tableau avec `id="age-table"`.
let table = document.getElementById('age-table')

// 2. All label elements inside that table
// 2. Tous les éléments 'label' dans le tableau
table.getElementsByTagName('label')
// or
// ou
document.querySelectorAll('#age-table label')

// 3. The first td in that table (with the word "Age")
// 3. Le premier td dans ce tableau (avec le mot "Age")
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. Le formulaire avec le nom "search"
// en supposant qu'il n'y ait qu'un élément avec name="search" dans le document.
let form = document.getElementsByName('search')[0]
// or, form specifically
// ou spécifiquement un formulaire
document.querySelector('form[name="search"]')

// 5. The first input in that form.
// 5. Le premier input dans ce formulaire
form.getElementsByTagName('input')[0]
// or
// ou
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. Le dernier input dans ce formulaire
let inputs = form.querySelectorAll('input') // trouve tous les inputs
inputs[inputs.length-1] // prend le dernier
```
10 changes: 5 additions & 5 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>Cherchez dans le site :
<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:
Recherchez les visiteurs :
<table id="age-table">
<tr>
<td>Age:</td>
<td id="age-list">
<label>
<input type="radio" name="age" value="young">less than 18</label>
<input type="radio" name="age" value="young">moins 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">plus de 50</label>
</td>
</tr>

<tr>
<td>Additionally:</td>
<td>Infos complémentaires :</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
# Recherche d'éléments

Here's the document with the table and form.
Voici le document avec le tableau et formulaire

How to find?...
Comment trouver ?...

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. Le tableau avec `id="age-table"`.
2. Tous les éléments `label` dans ce tableau (il devrait y en avoir 3).
3. Le premier `td` dans ce tableau (avec le mot "Age").
4. Le `form` avec `name="search"`.
5. Le premier `input` dans ce formulaire.
6. Le dernier `input` dans ce formulaire.

Open the page [table.html](table.html) in a separate window and make use of browser tools for that.
Ouvrez la page [table.html](table.html) dans un onglet à part et utilisez les outils du navigateur pour cela.
Loading