자바스크립트 queryselector 사용법 : 꼭 document가 아니어도 가능

- 요소를 선택하는 함수 querySelector - 

문서 객체 안에서 특정 요소 하나를 선택할 때 querySelector 함수를 쓴다.
아래와 같이 쓴다.

document.querySelector('선택자');

보통 위처럼만 쓰다 보니 그대로 굳어져 버렸다.
사실 실행하는 객체가 굳이 document일 필요는 없다.

ele.querySelector('선택자');

 

위처럼 어떤 요소에서 함수를 호출해도 된다.
querySelector를 부르는 어떤 요소가 있고,
그 요소부터 시작해서 하위 요소를 찾는 개념이다.

 

- 예시 -

테이블에서 어떤 셀을 클릭했을 때, 
같은 행에 있는 다른 열의 값을 
얻어오는 기능이다.

const row = e.currentTarget.parentNode;
const price = row.querySelector('.unitPrice').innerHTML;

이벤트 객체에서 속성값에 접근하여 행을 받아온다.
다시 그 행에서 하위 요소를 선택하기 위해 querySelector를 쓴다.

예시를 하나 더 보자면,
어떤 div 요소 안에 속해 있는 버튼을 불러오는 코드다.

const container = document.querySelector('div#subContainer');
const btn = container.querySelector('input[name="payBtn"]');

-220404