我们希望将这个开源项目提供给全世界的人。请帮助我们将教程的内容 翻译为你所掌握的语言 对应的版本。
è´­ä¹°EPUB/PDF
教程路线图
回到课程

搜索元素

重要程度: 4

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

如何查找？……

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

在一个单独的窗口中打开 table.html 页面，并对此页面使用浏览器开发者工具。

实现的方式有很多种。

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

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

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

// 3. 表格中的第一个 td（带有 "Age" 字段）
table.rows[0].cells[0]
// 或
table.getElementsByTagName('td')[0]
// 或
table.querySelector('td')

// 4. 带有 name="search" 的 form。
// 假设文档中只有一个 name="search" 的元素
let form = document.getElementsByName('search')[0]
// 或者，专门对于 form
document.querySelector('form[name="search"]')

// 5. 表单中的第一个 input
form.getElementsByTagName('input')[0]
// 或
form.querySelector('input')

// 6. 表单中的最后一个 input
let inputs = form.querySelectorAll('input') // 查找所有 input
inputs[inputs.length-1] // 取出最后一个