JS) 선택자(DOM에서 Element 노드 찾기)

https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Locating_DOM_elements_using_selectors

https://ko.javascript.info/searching-elements-dom

Javascript에서 특정 Element를 가져오는 선택자 API를 정리해보자.
제일 많이 쓰이는 선택자는 querySelector라고 하니
querySelector를 제외한 나머지는 참고용으로만 알아두자.

1. querySelector

querySelector는 선택한 Element 중 첫 번째 Element만을 찾아온다.

const str1 = document.querySelector("#id");
const str2 = document.querySelector(".class");
const str3 = document.querySelector("tag");
const str4 = document.querySelector(".class1, .class2");

const str5 = document.querySelector(".div > :first-child");

2. querySelectorAll

querySelector와 방법은 같지만, 선택되는 결과는 다르다.
querySelectorAll의 이름을 보면 알 수 있듯 선택된 Element와 같은 Element를 'All' = 모두 찾아온다.

3. getElementsByTagName

//동일한 태그를 반환
const str6 = document.getElementsByTagName("tag");

4. getElementsByClassName

//동일한 className을 가진 모든 Element를 반환
const str7 = document.getElementsByClassName("className");

5. getElementById

//동일한 id를 가진 Element를 반환
const str8 = document.getElementById("id");