querySelector
보통 자바스크립트에서 HTML 태그를 가져오는 것을 선택한다고 표현한다. 선택하기 위해서는 특별한 함수와 특별한 방법을 사용한다. 특별한 함수는 document.querySelector이고 사용 방법은 아래과 같다.
document.querySelector('선택자');예시
const $input = document.querySelector('input');
console.log($input); //input태그를 선택한 것태그가 여러 개 있는 경우, 태그를 모두 선택하고 싶으면 document.querySelectorAll 함수를 사용한다.
document.querySelectorAll('선택자');만약, 동일한 여러 개의 태그가 있는데 querySelectorAll이 아닌 querySelector를 사용한다면 첫 번째에 해당하는 태그만 선택이 된다.
태그 뿐만 아니라 id나 class를 선택하고 싶을 때에도
document.querySelector('#아이디명');
document.querySelectorAll('.클래스명'); //All이기 때문에 동일한 클래스명을 가진 태그들이 모두 선택됨자식태그만 선택하고 싶은 경우에는
document.querySelector('div>span'); //div 안에 있는 span태그 하나만 선택 됨내부 자손태그를 모두 선택하고 싶은 경우에는
document.querySelector('div span'); //div 안에 있는 모든 span태그의 안에 있는 태그들까지 선택됨