レッスンに戻る

要素を検索する

重要度: 4

表とフォームを含むドキュメントは次のとおりです。

検索方法?…

  1. id="age-table" の表。
  2. その表内のすべての label 要素 (3 つあるはずです)。
  3. その表内の最初の td (「年齢」という言葉を含む)。
  4. name="search"form
  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" in the document
let form = document.getElementsByName('search')[0]
// or, form specifically
document.querySelector('form[name="search"]')

// 5. The first input in that 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