回到课程

搜索元素

重要程度: 4

这是带有表格和表单的文档。

如何查找?

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

新开一个独立的窗口,打开页面 table.html,然后再此页面上使用开发者工具。

实现的方式有很多种。

以下是列举的一些方法:

// 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