[JavaScript] Searching for Elements

HTML에 정의된 id와 JavaScript에서 꼭 같아야 한다.
다르면 의미가 없다. 필히 확인!

그러나 보통 id를 사용하기보다 class나 classname을 사용한다.

1. class를 사용하는 방법

JavaScript를 통해 HTML을 가져올 수 있는 방법은 크게 세 가지가 있다.
(1) getElementById(): 말 그대로 id, 하나의 값을 반환해줄 때 쓴다.
(2) getElementByClassName(): classname을 가져온다. (array를 반환)
(3) getElementByTagName(): name을 할당할 수 있다. (array를 반환)

const hellos = document.getElementByClassName("hello");

console.log(hellos);

classname은 HTML에 classname과 같아야 한다.

2. querySelector

앞으로 가장 많이 쓸 것은!!
querySelector: element를 CSS selector 방식으로 검색할 수 있다.
(ex. h1:first-child)

querySelector은 hello란 class 내부에 있는 h1을 가지고 올 수 있다는 것을 의미한다.
단 하나의 element를 return 해준다.
또, 똑같은 class가 여러 개 있을 때 오직 첫 번째 것만 가져온다!!
세 개 모두 가져오고 싶을 땐

querySelectorAll

const title = document.querySelector(".hello h1");

console.log(title);