[객체]2. HTML DOM 객체 - querySelector() , querySelectorAll()

DOM요소를 다양한 방법으로 찾아주는 함수 - querySelector(), querySelectorAll()

- id,class 값을 사용해도 되고, 태그 이름을 사용해도 된다.

- id는 (#) class는 (.)을 이용하면 되고 태그 이름은 기호 없이 태그 이름만 사용하면 된다.

- class 속성은 한 문서에서 여러번 사용할 수 있기 때문에 querySelectorAll() 함수 이용 (이 역시 배열처럼 사용한다.)

 

getElementById() VS querySelector() 사용법

document.getElementById("container");
document.querySelector("#container");

getElementById()와 querySelector() 함수의 차이

- getElementById(), getElementsByClassName(), getElementsByTagName() 함수는 이름에 'Elements'가 들어 있다.

이름에서도 알 수 있듯이 이들 함수는 DOM의 노드 중에서 요소 노드까지만 접근할 수 있다.

- 반면 querySelector() , querySelectorAll() 함수는 요소 노드 뿐만 아니라 텍스트 노드와 속성 노드까지 접근 할 수 있음

- 자바스크립트에서 웹 요소 정도만 변경한다면 getElementById()

- 웹 요소 뿐만 아니라 요소의 텍스트나 속성을 변경하거나 새로운 노드를 추가하고 싶다면 querySelector()

- 물론 요소 노드만 필요한 경우에도 querySelector() 사용 가능