Skip to content

Update translation of 2-ui/1-document/04-searching-elements-dom #668

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
leviding merged 4 commits into from
Mar 19, 2020
Merged

Update translation of 2-ui/1-document/04-searching-elements-dom #668

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a5f6ba7
Update article.md
leviding Mar 19, 2020
4af3dd8
Update article.md
leviding Mar 19, 2020
e1a7a66
Update task.md
leviding Mar 19, 2020
372997f
Update solution.md
leviding Mar 19, 2020
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,36 +1,35 @@
实现的方式有很多种。

以下是列举的一些方法：
以下列举的是其中一些方法：

```js
// 1. The table with `id="age-table"`.
// 1. 带有 id="age-table" 的表格。
let table = document.getElementById('age-table')

// 2. All label elements inside that table
// 2. 表格内的所有 label 元素
table.getElementsByTagName('label')
// or
// 或
document.querySelectorAll('#age-table label')

// 3. The first td in that table (with the word "Age").
// 3. 表格中的第一个 td（带有 "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"
// 4. 带有 name="search" 的 form。
// 假设文档中只有一个 name="search" 的元素
let form = document.getElementsByName('search')[0]
// or, form specifically
// 或者，专门对于 form
document.querySelector('form[name="search"]')

// 5. The first input in that form.
form.getElementsByTagName('input')
// or
// 5. 表单中的第一个 input
form.getElementsByTagName('input')[0]
// 或
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
// 6. 表单中的最后一个 input
let inputs = form.querySelectorAll('input') // 查找所有 input
inputs[inputs.length-1] // 取出最后一个
```
18 changes: 9 additions & 9 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 @@ -4,15 +4,15 @@ importance: 4

# 搜索元素

这是带有表格和表单的文档。
这是带有表格（table）和表单（form）的文档。

如何查找？
如何查找？……

1. `id="age-table"` 的表格。
2. 所有的 `label` 元素都内嵌于表格（应该有三个）。
3. 表格中的第一个 `td`（字段是 "Age"）。
4. `form` 的一个字段是 `search`。
5. 第一个 `input` 在表单中。
6. 最后一个 `input` 在表单中。
1. 带有 `id="age-table"` 的表格。
2. 表格内的所有 `label` 元素（应该有三个）。
3. 表格中的第一个 `td`（带有 "Age" 字段）。
4. 带有 `name="search"` 的 `form`。
5. 表单中的第一个 `input`。
6. 表单中的最后一个 `input`。

新开一个独立的窗口，打开页面 [table.html](table.html)，然后再此页面上使用开发者工具。
在一个单独的窗口中打开 [table.html](table.html) 页面，并对此页面使用浏览器开发者工具。
Loading