보통 자바스크립트에서 HTML 태그를 가져오는 것을 선택한다고 표현한다.
//document: 브라우저에서 제공하는 객체, 따로 선언X
document.querySelector('선택자');
JavaScript
복사
코드 기본 사용법
선택자(querySelector) 사용
const $input = document.querySelector('input');
console.log($input);
JavaScript
복사
코드
콘솔창 결과
const $button = document.querySelector('button');
console.log($button);
JavaScript
복사
코드
콘솔창 결과
참고) 변수명을 지을 때 나만의 규칙을 만들기!!
•
querySelectorAll() : 모든 요소를 선택함
•
여러 요소가 존재하는 상태에서 querySelector()로 선택할 경우 첫번째 요소만 선택됨
document.querySelectorAll('.btn'); // class가 btn인 모든 요소를 선택
document.querySelector('span'); // 첫 span 요소만 선택
document.querySelector('#order'); // id가 order인 요소를 선택
JavaScript
복사
•
id는 중복 지정 시 오류는 발생하지 않지만 고유한 값으로 지정하기
•
여러 요소를 선택하고 싶다면, class를 사용!!
const $span1 = document.querySelector('div span'); // div의 자손인 span 선택(자식 뿐만 아니라 후손까지)
const $span2 = document.querySelector('div>span'); // div의 자식인 span 선택
JavaScript
복사
