[JavaScript 자바스크립트] querySelector / querySelectorAll / getElementById란 ?

1. querySelector 메소드

- 선택자를 받아서 선택자와 일치하는 문서 안의 첫번째 요소 반환

- 일치하는 요소만 반환할 수 있으므로, 일치하는 요소가 없으면 null 반환

- css 선택자 요구

document.querySelector ("a");  // a 태그 선택
document.querySelector ("#abc");  // id 요소 선택
document.querySelector (".abc");  // class 요소 선택
document.querySelector(".abc > nobr"); // abc 클래스의 nobr태그 선택

 

 

2. querySelectorAll 메소드

- 특정 css 선택자를 가진 모든 요소 선택

- 여러 요소 한번에 가져올 수 있음

document.querySelectorAll( '.abc, #def' );  

 

 

3. getElementById 메소드

- id를 인자로 전달받아 전달받은 선택자와 일치하는 요소 반환

- 일치하는 요소가 없으면 null 반환

- 문자열 타입의 'ID' 요구

 

 

	차이점	공통점
querySelector	css 선택자 요구 최상단 요소만 로직 반환	요소 찾아서 반환 반환 된 요소는 dom의 객체 = 조작 가능
querySelectorAll	css 선택자 요구 여러 요소 한번에 반환
getElementById	기호 없이 아이디 입력