자바스크립트 선택자 정리

---

HTML 에서 특정 부분에 애니메이션 효과를 주거나 내용을 바꿀 때 사용하는
자바스크립에서 가장 기본적인 선택자에 대해서 정리해보겠습니다.

---

document.getElementById("태그의 아이디명");

: 태그의 아이디를 통해 선택하는 방식이다. 리턴타입은 객체(1개)이다.

document.getElementById("태그 아이디명");

예)
const mainInfo = document.getElementById("mainInfo");

document.getElementsByTagName(태그)

: 태그명 "div", "span" 등의 태그를 통해 선택하여 NodeList 타입을 가져온다.

document.getElementsByTagName("태그");

예)
const nodeList = document.getElementsByTagName("div");

document.getElementsByName("name값");

: 태그의 name 값을 통해 선택한다. 이때 리턴값은 NodeList타입이다.

document.getElementsByName("name값");

예)
const nodeList = document.getElementsByName("nameEx");

doucument.getElementsByClassName("태그의 클래스명");

: 태그의 클래스를 통해 선택하는 방식이다. 리턴타입은 NodeList이다.

document.getElementsByClassName("태그 클래스명");

예)
const nodeList = document.getElementsByClassName("name_class");

document.querySelector("선택자");

: 흔히 css를 작성할 때 사용하는 선택자를 활용해서 선택하는 방식이다. 리턴 타입은 객체(1개)이다

document.querySelector("선택자");

예)
const mainInfo = document.querySelector("body > div#div_id");

document.querySelectorAll("선택자");

: 선택자 중에서 복수의 대상을 NodeList 형식으로 가져오는 방식이다.

document.querySelector("선택자");

예)
const nodeList = document.querySelector("body > section:last-child > ol:first-child > li");