getElement*, querySelector로 요소 검색

모던 자바스크립트 튜토리얼

getElement, querySelector

웹 페이지 내에서 요소에 접근하는 매서드

document.getElementById(id)

id를 통해 요소에 접근하는 방법이다.

예시

<div id="elem">
  <div id="elem-content">Element</div>
</div>

<script>
  // 요소 얻기
  let elem = document.getElementById('elem');

  // 배경색 변경하기
  elem.style.background = 'red';
</script>

document.getElementsByClassName(class)

class를 통해 요소에 접근하는 방법이다.
해당 클래스 속성값에 대응하는 모든 요소들을 담은 컬렉션을 반환.

예시

<div class="elem">
  <div id="elem-content">Element</div>
</div>

<script>
  // 요소 얻기
  let elem = document.getElementsByClassName('elem')[0];

  // 배경색 변경하기
  elem.style.background = 'red';
</script>

document.getElementsByTagName(tagname)

태그를 통해 요소에 접근하는 방법이다.
해당 태그네임의 모든 요소 노드를 컬렉션으로 반환.
태그네임에 *이 들어가면 모든 태그가 검색된다.

예시

<div class="elem">
  <div id="elem-content">Element</div>
</div>

<script>
  // 요소 얻기
  let elem = document.getElementsByTagName('div')[0];

  // 배경색 변경하기
  elem.style.background = 'red';
</script>

document.getElementsByName(name)

name속성값을 담은 요소를 컬렉션으로 반환.

예시

<form name = "myName">
	<div class="elem">
  	  <div id="elem-content">Element</div>
    </div>

<script>
  // 요소 얻기
  let elem = document.getElementsByName('myName')[0];

  // 배경색 변경하기
  elem.style.background = 'red';
</script>

document.querySelectorAll(css)

CSS선택자에 대응하는 요소들을 컬렉션으로 반환.

예시

<ul>
  <li>1-1</li>
  <li>1-2</li>
</ul>
<ul>
  <li>2-1</li>
  <li>2-2</li>
</ul>
<script>
  let elements = document.querySelectorAll('ul > li:last-child');

  for (let elem of elements) {
    alert(elem.innerHTML); // "1-2", "2-2"
  }
</script>

가상 클래스도 사용 가능

<ul>
  <li>1-1</li>
  <li>1-2</li>
</ul>
<ul>
  <li>2-1</li>
  <li>2-2</li>
</ul>
<script>
  let elements = document.querySelectorAll('ul:hover')// 마우스 포인터가 hover상태인 ul을 반환
</script>

document.querySelector(css)

CSS선택자에 대응하는 요소들중 첫번째를 반환.

<ul>
  <li>1-1</li>
  <li>1-2</li>
</ul>
<ul>
  <li>2-1</li>
  <li>2-2</li>
</ul>
<script>
  let elements = document.querySelector('ul')// ul태그중 첫번째 ul 반환
  console.log(elements) // 첫번쨰 ul태그 내용 출력
</script>

getElementBy* vs querySelector

getElementBy*

• 살아있는 컬렉션을 반환.(문서에 변환이 있을때마다 자동 갱신됨.)

querySelectorAll

• 정적인 컬렉션을 반환. (문서에 변환이 있어도 첫번째에 선언할때의 컬렉션 유지)

예시

<div>첫 번째 div</div>

<script>
  let getDivs = document.getElementsByTagName('div');
  let divs = document.querySelectorAll('div');
  console.log(getDivs.length); //1
  console.log(divs.length); // 1
</script>

<div>두 번째 div</div>

<script>
  console.log(getDivs.length); //2
  console.log(divs.length); // 1
</script>

그 외

• matches(css) : css선택자와 해당 요소의 일치여부 검사
• closest(css) : 해당 css선택자와 일치하는 가장 가까운 조상요소 반환
• `elemA.contains(elemB) : elemB가 elemA의 속하거나(elemB가 elemA의 후손일때) elemA == elemB일때 참

과제

요소 검색하기

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

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

• id="age-table"인 테이블
• 테이블 내의 label 요소 모두(총 3개)
• 테이블 내의 첫 번째 td(Age가 적힌 곳)
• name="search"인 form
• 폼의 첫 번째 input
• 폼의 마지막 input

테이블

1. document.querySelector('#age-table')
2. document.querySelectorAll('#age-table label')
3. document.querySelector('td')
4. document.querySelector('form[name='search']')
5. document.querySelector('form input')
6. let inputs = document.querySelectorAll(' input')
   inputs[inputs.length-1]