본 튜토리얼은 전 세계 사람들이 이용할 수 있는 오픈 소스 프로젝트입니다. 프로젝트 페이지에 방문하셔서 번역을 도와주세요.
구매EPUB/PDF
튜토리얼 지도
돌아가기

요소 검색하기

중요도: 4

테이블과 폼이 있는 문서가 있다고 가정합시다.

아래 조건에 맞는 요소는 어떻게 찾을 수 있을까요?

  1. id="age-table"인 테이블
  2. 테이블 내의 label 요소 모두(총 3개)
  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]
// from을 정확히 지정해 줄 수도 있습니다.
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] // 마지막 요소를 얻어냅니다.