Lokasi ngalangkungan proxy:   [ UP ]  
[Ngawartoskeun bug]   [Panyetelan cookie]                
Skip to content

Searching: getElement*, querySelector* #292

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
ockley merged 1 commit into from
May 2, 2026
Merged

Searching: getElement*, querySelector* #292

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
24 changes: 12 additions & 12 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.
Der er mange måder at gøre det.

Here are some of them:
Her er et par af dem:

```js
// 1. The table with `id="age-table"`.
// 1. Tabellen med `id="age-table"`.
let table = document.getElementById('age-table')

// 2. All label elements inside that table
// 2. Alle label-elementer inde i den tabel
table.getElementsByTagName('label')
// or
document.querySelectorAll('#age-table label')

// 3. The first td in that table (with the word "Age")
// 3. Det første `td` i den tabel (med ordet "Alder")
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. Formularen med navnet "search"
// antager, at der kun er ét element med name="search" i dokumentet
let form = document.getElementsByName('search')[0]
// or, form specifically
// Eller specifikt selve formularen
document.querySelector('form[name="search"]')

// 5. The first input in that form.
// 5. Det første input i den form
form.getElementsByTagName('input')[0]
// or
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. Det sidste input i den form
let inputs = form.querySelectorAll('input') // find alle input
inputs[inputs.length-1] // tag den sidste
```
78 changes: 42 additions & 36 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
@@ -1,42 +1,48 @@
<!DOCTYPE HTML>
<!DOCTYPE html>
<html>
<body>
<form name="search">
<label>Search the site:
<input type="text" name="search">
</label>
<input type="submit" value="Search!">
</form>
<body>
<form name="search">
<label>
Søg på siden:
<input type="text" name="search" />
</label>
<input type="submit" value="Search!" />
</form>

<hr>
<hr />

<form name="search-person">
Search the visitors:
<table id="age-table">
<tr>
<td>Age:</td>
<td id="age-list">
<label>
<input type="radio" name="age" value="young">less than 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>
</td>
</tr>
<form name="search-person">
Søg efter besøgende:
<table id="age-table">
<tr>
<td>Alder:</td>
<td id="age-list">
<label>
<input type="radio" name="age" value="young" />
under 18
</label>
<label>
<input type="radio" name="age" value="mature" />
18-50
</label>
<label>
<input type="radio" name="age" value="senior" />
over 50
</label>
</td>
</tr>

<tr>
<td>Additionally:</td>
<td>
<input type="text" name="info[0]">
<input type="text" name="info[1]">
<input type="text" name="info[2]">
</td>
</tr>
<tr>
<td>Yderligere:</td>
<td>
<input type="text" name="info[0]" />
<input type="text" name="info[1]" />
<input type="text" name="info[2]" />
</td>
</tr>
</table>

</table>

<input type="submit" value="Search!">
</form>
</body>
<input type="submit" value="Search!" />
</form>
</body>
</html>
21 changes: 11 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,18 @@ importance: 4

---

# Search for elements
# Søg efter elementer

Here's the document with the table and form.
Her er dokumentet med tabellen og formularen.

How to find?...
Hvordan finder du ...?

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. Tabellen med `id="age-table"`.
2. Alle `label` elementer inde i den tabel (der burde være 3 af dem).
3. Det første `td` i den tabel (med ordet "Alder").
4. Den første `form` med `name="search"`.
5. Det første `input` i den form.
6. Det sidste `input` i den form.

Åben siden [table.html](table.html) i et separat vindue og brug browserværktøjerne til det.

Open the page [table.html](table.html) in a separate window and make use of browser tools for that.
Loading