0. 서론
업무중 중간중간 더 자세히 공부해야지 하고 메모해두고 틈틈이 찾아봤던 지식들 묶어서 정리해보기
어쩌다 보게됐는지 기억이 흐릿하지만, 아무튼 querySelector를 보고 좀 더 자세히 알고 싶어서 검색하다보니 querySelector/quertSelectorAll 두가지가 있는걸 알게되었다.
일단 실무에서 나는 제이쿼리의 선택자를 사용하고 있었기 때문에, 제이쿼리 선택자와 어떻게 다른지부터 찾아보았다.
검색결과 크게 getElementById, 제이쿼리 선택자, 쿼리셀렉터 세가지의 차이를 알게되었으며, 쿼리셀렉터를 찾아보며 nodeList 개념을 알게되었다.
그래서! 위의 3가지의 선택자에 대한 정리, nodeList, nodeList순회를 위한 for/forEach에 대해서 정리해보기로했다.
1. getElementById vs jQuery vs querySelector 뭐가 다르지?
우선, querySelector() 란 css 선택자를 이용하여 요소를 찾아, 해당 요소를 반환하는 메소드이다. 이 때, 매개로 전달한 선택자에 해당하는 요소가 여러개일 때 첫번째 요소를 반환하며 모든 요소를 가져오고 싶은 경우는 querySelectorAll() 이다. 그리고 해당하는 모든 요소를 반환하는 querySelectorAll은 요소들을 nodeList 형태로 반환한다. 일치하는 것이 없다면 null을 반환한다.
그렇다면 여기서 기존 자바스크립트에서 쓰던 document.getElementById와 제이쿼리의 선택자 $()가 자연스럽게 떠오르는데 그 차이가 뭘까?
우선 예를들어 'acctNo'라는 아이디를 가진 요소를 선택하고 싶을 때,
세 케이스는 각각 아래와 같다.
let acct_no_g = document.getElementById('acctNo');
let acct_no_j = $('#acctNo');
let acct_no_q = document.querySelector('#acctNo');우선 코드만 봐도 제이쿼리의 선택자를 이용한게 가장 짧고 쉽다.
그렇다면 쿼리셀렉터는 기존의 getElementBy~와 길이도 크게 다르지 않아보이는데 왜 나온걸까? 하는 의구심이 생겼다.
그 해답은 class,id,tag가 아닌 다른 속성들을 이용한 선택이 필요할 때 에 있다.
bankCode='020' 이라는 value속성을 가진 요소들을 선택하고 싶을때, getElementBy~로는 해당 요소들을 선택할 방법이 없다. (물론 제이쿼리는 이러한 속성을 통한 선택도 가능하지만, 모든 프로그램에서 제이쿼리를 쓰고있는 것이 아니니,,) 그러나 querySelector를 사용하면 다양한 속성을 가지고 요소선택이 가능해진다!
//은행코드를 가진 요소들 선택
let have_bank_code = document.querySelectorAll('[bankCode]');
//'020' 우리은행코드를 가진 요소들 선택
let wr_bank_cstm = document.querySelectorAll('[bankCode="020"]');
즉, id,class,tag에 국한되어 요소를 가져올 수 있던 자바스크립트에 제이쿼리의 선택자만큼 다양한 속성으로 요소를 가져올 수 있게 만들어준 것이 querySelector인듯하다.
2. QuerySelector, QuerySelectorAll
-
ES5 에서 등장
-
querySelector은 매개가 되는 (선택할)특성에 해당하는 값 '하나'를 반환한다. 여러개가 존재하는 경우, 첫번째 요소만 반환
-
querySelectorAll 의 경우, 해당하는 모든 요소를 nodeList로 반환
이렇게 정리하다보니 nodeList가 궁금해졌다.
(조각조각 공부한것들 모으는 시리즈인데) 글이 길어져서 노드리스트와 for/forEach는 다음 글로 작성해야겠다...........ㅠ-ㅠ
참고링크 [https://www.javascripttutorial.net/javascript-dom/javascript-queryselector/]
