jeena/en.javascript.info
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

minor

Browse source
This commit is contained in:
Ilya Kantor 2017-03-30 17:47:55 +03:00
parent d2378df45e
commit d110eb3ea8
8 changed files with 0 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

36
2-ui/1-document/04-searching-elements-dom/1-find-elements/solution.md Normal file
View file

@ -0,0 +1,36 @@
There are many ways to do it.
Here are some of them:
```js
// 1. The table with `id="age-table"`.
let table = document.getElementById('age-table')
// 2. All label elements inside that table
table.getElementsByTagName('label')
// or
document.querySelectorAll('#age-table label')
// 3. The first td in that table (with the word "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"
let form = document.getElementsByName('search')[0]
// or, form specifically
document.querySelector('form[name="search"]')
// 5. The first input in that form.
form.getElementsByTagName('input')
// or
form.querySelector('input')
// 6. The last input in that form.
// there's no direct query for that
let inputs = form.querySelectorAll('input') // search all
inputs[inputs.length-1] // take last
```

42
2-ui/1-document/04-searching-elements-dom/1-find-elements/table.html Normal file
View file

@ -0,0 +1,42 @@
<!DOCTYPE HTML>
<html>
<body>
<form name="search">
<label>Search the site:
<input type="text" name="search">
</label>
<input type="submit" value="Search!">
</form>
<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>
<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>
</table>
<input type="submit" value="Search!">
</form>
</body>
</html>

18
2-ui/1-document/04-searching-elements-dom/1-find-elements/task.md Normal file
View file

@ -0,0 +1,18 @@
importance: 4
---
# Search for elements
Here's the document with the table and form.
How to find?
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 the 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.