728x90
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 | 기호 없이 아이디 입력 |
728x90
'FRONT' 카테고리의 다른 글
| [JavaScript 자바스크립트] 일정 시간 뒤 함수 실행 setTimeout() (0) | 2022.08.04 |
|---|---|
| [JavaScript 자바스크립트] indexOf 란 ? (0) | 2022.08.04 |
| [JavaScript 자바스크립트] classList 사용 - 여러개의 클래스 중 특정 클래스 추출 (0) | 2022.08.03 |
| [Api] 주소 API (0) | 2022.06.17 |
| [JavaScript 자바스크립트] 뒤로가기, 앞으로가기 (0) | 2022.06.16 |