요즘 자바스크립트로 Component를 직접 구현하고 있다.
구글링으로 다들 어떻게 했는지 찾아보는데 다들 addEventListener를 사용할 때 querySelector를 사용하더라.
"getElementById나 getElementsByClass는 왜 사용안하지...?"
라는 생각이 들어서 직접 사용해보았다.
Uncaught TypeError: this.target.getElementById is not a function at Template.setEvent (Template.js:16) at new Component (Components.js:8) at Template._createSuperInternal (app.js:28) at new Template (Template.js:3) at index.js:5 at app.js:224 at app.js:226역시 ㅋㅋㅋㅋ
무언가 문제가 있거나 좋지 않은 방법이니 다들 사용하지 않는거겠지!
근데 그래서 왜 안될까..? 해서 찾아보니까 정말 간단한 문제였다.
나는 평소에 선택자를 탐색할 때 항상 document를 이용하여 탐색했기 때문에 사소한 것을 모르고 있었다.
// ... document.getElementById(..) document.getElementsByClass(...) // ...getElementById( ) 등의 함수는 document에서만 사용할 수 있다.
하지만 Component는 document가 아닌 특정 Element를 가리키는 구조다.
this.target은 엘리먼트(div 등의 태그들)를 가리키기 때문에 getElementBy...를 사용할 수 없던 것이다.
만약 내가 document를 기준으로 선택자를 탐색한다면 위의 방법이 맞겠지만
특정 요소를 기준으로 선택자를 탐색한다면 getElementBy...는 사용하지 못한다.
(물론 document에서는 querySelector도 사용할 수 있다. 더 상위개념이니 당연하긴 하지...)
요악하자면
문서 전체를 탐색해야 한다면? : getElementBy... , querySelector
특정 Element 내부에서 탐색해야 한다면? : querySelector
이렇게 사용하면 된다!
또한 is not a function 같은 에러가 다시 발생한다면... 해당 API 문서를 읽어보는 습관을 가지자!