私たちはこのオープンソースプロジェクトを世界中の人々に提供したいと考えています。このチュートリアルの内容をあなたが知っている言語に翻訳するのを手伝ってください。
購入するEPUB/PDF
チュートリアルマップ
レッスンに戻る

要素を検索する

重要性: 4

ここに、テーブルとフォームを持つドキュメントがあります。

どうやって見つけますか?

  1. id="age-table" を持つテーブル.
  2. そのテーブル内のすべての label 要素(3つ存在するはずです)
  3. そのテーブル内の最初の td (“Age” という言葉を持つ)
  4. 名前が search の form
  5. そのフォーム内の最初の input
  6. そのフォーム内の最後の input

別のウィンドウでtable.htmlを開き、ブラウザツールを使ってください。

多くの方法があります。

これはそのいくつかです。:

// 1. id="age-table" を持つテーブル
let table = document.getElementById('age-table')

// 2. テーブル内のすべての label 要素
table.getElementsByTagName('label')
// or
document.querySelectorAll('#age-table label')

// 3. そのテーブル内の最初の td (“Age” という言葉を持つ).
table.rows[0].cells[0]
// or
table.getElementsByTagName('td')[0]
// or
table.querySelector('td')

// 4. 名前が search の form.
// name="search" を持つ要素が1つと想定しています
let form = document.getElementsByName('search')[0]
// or, form をつけ具体的に
document.querySelector('form[name="search"]')

// 5. フォーム内の最初の input
form.getElementsByTagName('input')
// or
form.querySelector('input')

// 6. フォーム内の最後の input
// それ用の直接のクエリはありません
let inputs = form.querySelectorAll('input') // 全検索
inputs[inputs.length-1] // 最後を取る