html과 js 상호작용

<h1 class="h" id="title">xxx</h1>
<div class="hello"><h1>xxx</h1></div>

const title = document.getElementById("title");
//title 변수는 <h1 class="h" id="title">xxx</h1>를 가리킨다.
title.innerText = "ggg";
console.log(title.className);

html가져오는법
1. getElementById
2. getElementsByClassName
3. getElementsByTagName
4. ...

querySelector는 element를 css의 방식으로 가져올 수 있게 해준다. 하지만 위의 방법과는 다르게 여러개가 있을 경우 배열로 나오지 않고 맨 위의 것만 나오게 된다.
여러개를 모두 가져오고싶다면 qeurySelectorAll을 사용해야 한다.

const h = document.querySelector(".hello h1");
//const h = document.querySelector("#hello");
//id로도 검색가능
const h2 = document.querySelectorAll(".hello h1");

console.log(h);
//결과는 <h1>xxx</h1>이 나온다.
console.log(h2);
//배열 형태로 나오게된다.