javascript는 html에 접근하고 읽을 수 있고 변경 할 수도 있다.
getElementById/className
querySelector
querySelectorAll
const title=document.querySelector("#hello");
const title=document.getElementById("hello");
위 두코드는 같은 일을 하지만 getElementById의 경우 id하위의 것들을 가져올 수 없다.
브라우저가 event를 감지하는 방법
1. html에서 element를 가져와서
2. addEventListener(); 함수를 실행시킨다.
3. 괄호에 어떤 이벤트를 감지하고 싶은지 명시한다.
4. 해당 이벤트가 감지되었을 때 실행할 함수를 전달한다.
여기까지 하면 아래와 같은 코드를 완성할 수 있다.
const title=document.querySelector(".hello h1"); --- 1
function handleTitleClick(){
console.log("title was clicked");
} --- 3
title.addEventListener("click", handleTitleClick); ---2