[JavaScript] DOM - 제어 대상 찾기

출처

- 생활코딩

https://opentutorials.org/course/1375/6656

 

 

 

문서를 자바스크립트로 제어하기 위해 제일 먼저 할 일은 제어 대상을 찾는 것이다.

문서 내의 객체를 찾기 위해 document객체의 method를 이용한다.

 

 

document.getElementsByTagName()

()안에 들어가 있는 태그명에 해당되는 요소가 담긴

배열과 유사한 리스트(NodeList)를 불러온다.

NodeList는 배열은 아니지만 length와 배열접근연산자를 사용해서

요소를 조회할 수 있다.

 

 

document.getElementsByClassName()

()안에 들어가 있는 클래스명에 해당되는 요소가 담긴

배열과 유사한 리스트(NodeList)를 불러온다.

 

 

document.getElementById()

- 하나의 요소만 가지고 온다.

- 성능면에서 가장 우수하다.

- 콘솔로 확인해보면 그 아이디가 쓰인 코드 한줄을 통째로 보여준다.

 

 

 

document.querySelector()

- 태그명, class명, Id명과 같이 다양한 값을 통해
  해당되는 요소를 반환할 수 있어 편리하다.

- 요소 하나만 불러온다.

 

 

 

document.querySelectorAll()

- 선택자에 해당되는 모든 요소를

  유사 배열에 담아 반환한다.