getElementById는 querySelector처럼 서브쿼리를 줄 수 없다

 

 

JavaScript로 DOM을 조작하면서 사소할지라도 결코 무시할 수 없는 것이 있다.

바로 getElementById 와 querySelector의 구분이다.

 

JS파일에서 "querySelector"로 DOM 객체를 선언한다면, 그 객체가 HTML에서 자식으로 품고있는 하위 노드들까지 이어서 조회할 수 있다.

querySelector는 하위객체까지 모두 데려오기 때문이다.

const 고조할아버지 = document.querySelector("#js-고조할아버지");
const 증조할아버지 = 고조할아버지.querySelector("#js-증조할아버지");
const 할아버지 = 증조할아버지.querySelector("#js-할아버지");
const 아버지 = 할아버지.querySelector("#js-아버지");
const 아들 = 아버지.querySelector("#js-아들");
const 손자 = 아들.querySelector("#js-손자");

 

하지만 getElementById는 그 ID를 가진 딱 하나의 객체만을 가져오기 때문에, 위처럼 줄지어 조회할 수 없다.

const 고조할아버지 = document.getElementById("js-고조할아버지");
const 증조할아버지 = document.getElementById("js-증조할아버지");
const 할아버지 = document.getElementById("js-할아버지");
const 아버지 = document.getElementById("js-아버지");
const 아들 = document.getElementById("js-아들");
const 손자 = document.getElementById("js-손자");

 

간단한 내용이지만 그만큼 중요한 기본기이므로 반드시 숙지하자.