querySelector* 와 getElement*

자바스크립트 작성 시 HTML요소들을 가져오는 querySelector * 와 getElement 메서드에 대해 자세하게 정리해보고자 한다. 자주 사용하는 메서드인 만큼 메서드의 특징을 뚜렷히 알고 사용하는 것이 중요하다고 생각한다.

1️⃣ querySelector(css)

• CSS 선택자를 이용하여 요소 중 첫번째 요소를 반환한다.
• 선택자에 해당되는 요소가 여러개 있을 경우 가장 첫번째 단 한가지 요소만 추출된다.
• 일치하는 요소가 없으면 null을 반환한다.

⏺ 선택자 종류: 다양한 요소로 선택자를 통해 반환이 가능하며, CSS선택자와 그 방식이 동일하다. 선택자의 종류와 예시를 살펴보자.

• Tag 선택자: document.querySelector('h1')
• ID 선택자: document.querySelector('#header')
• Class 선택자: document.querySelector('.header')
  ➡️ 두개 이상의 클래스를 동시에 선택할 때 document.querySelector('.center.head') 와 같은 방식으로 적어준다.
• 속성 선택자: document.querySelector('[type=text]')
  ➡️ input 요소 선택 시 사용하는 경우가 많다.
• 후손 선택자: document.querySelector('body input') - body태그 안의 첫번째 input 태그를 반환한다.
• 복합 선택자: document.querySelector('div.user-panel.main input[name=login]') - 다양한 차원으로 선택자를 사용할 수 있다. 실제로 예시와 같은 차원까지 사용되지는 않지만, 그만큼 디테일하고 세세하게 선택자 사용이 가능하다는 점을 알아두자.
  (선택자에 기재한 element들은 모두 예시이다.)

⏺ querySelectorAll(css)

• css선택자에 대응하는 요소 모두를 list로 반환한다.
• 선택자에 일치하는 list를 반환하기 때문에 반복문과 활용하면 유용하다.
• elem.querySelector(css) = elem.querySelectorAll(css)[0]
  ➡️ 선택된 값은 동일하나, 전자는 선택자에 해당하는 첫번째 요소를 찾으면 검색을 멈추지만, 후자는 선택자에 해당하는 모든 요소를 검색한 후에 첫번째 요소를 반환한다. 따라서 전자가 더 빠르다고 할 수 있다.

2️⃣ getElementsBy *

• 태그, 클래스, ID 등을 이용하여 노드를 찾는 메서드
• 문서내 모든 요소들을 얻는다. (↔️ querySelector는 첫번 째 요소만 얻는다.)
  ➡️ 요소 하나가 아닌 컬렉션을 반환한다.
  예) document.getElementsByTagName('div')의 경우 문서 내 모든 div태그를 선택한다.
• getElementById를 제외하고, Elements! 즉 element에 s가 꼭 붙는다.
• getElementBy는 살아있는 컬렉션을 반환하지만 querySelectorAll은 정적인 컬렉션을 반환한다.
  ➡️ 메서드가 선언된 이후 반환을 의도한 요소가 추가, 변경될 경우 getElementBy는 수정된 내용을 반영하지만 querySelectorAll은 최초 선언된 시점만 반영할 뿐 이후 수정 내용을 반환하지 못한다.

🤔 별로 어렵지않은 기초 메서드를 이렇게 정리하는 이유는 실습을 하며, 이 메서드가 오랜시간 나를 헤매게한 문제의 원인이었기 때문이다. 간단한 메서드인줄 알고 고민없이 사용했다가 결국 오랜 시간을 허비한 끝에 내가 몰랐던 내용들을 알게되었다. 내가 의도한 대로 구현되면 그만. 이라는 생각을 버리자. 메서드를 사용하는 목적과 이유를 뚜렷히하고, 남들에게 왜 사용했는가에 대한 근거를 확실히 말할 수 있도록 하자!

출처

• https://ko.javascript.info/searching-elements-dom
• 유튜브 채널 <윤인성> - 혼공 자바스크립트 40강