document 객체

JS에서 HTML에 접근할 수 있는 객체

title 등 많은 것들을 담고 있음 (JS의 관점에서 보여줌)

document.title
document.body

getElementById

<h1 id="title">hello</h1>

const title = document.getElementById("title");
title.innerText="Got you!";

getElementByClassName

<h1 id="title" class="something">hello</h1>
<h1 id="title" class="something">hello</h1>
<h1 id="title" class="something">hello</h1>
<h1 id="title" class="something">hello</h1>
<h1 id="title" class="something">hello</h1>

const somethings = document.getElementByClassName("something");

querySelector(All)

css의 방식으로 element 검색가능

<div class="hello">
	<h1>Grab me!</h1>
</div>

const title = document.querySelector(".hello h1");      //조건에 부합하는 첫번째 element
const title2 = document.querySelectorAll(".hello h1");  //배열형식으로 모든 element

Event

addEventListener