Javascript는 html과 상호작용
Javascript는 html에 접근하도록 설정
Document 는 web browser를 의미함.
const title = document.getElementById("title");
console.log(title);
qeurySelector는 css 기반으로 선택을 한다.
getelementbyid 와 같은 기능을 하므로 queryselector 기반으로 한다.
const title = document.querySelector("div.hello:first-child h1");
function handleTitleClick() {
console.log("title was clicked!");
}
title.addEventListener("click",handleTitleClick);
function handleTitleClick(){
title.style.color = "blue";
}
function handleMouseEnter(){
title.innerText = "mouse is here!";
}
function handleMouseLeave(){
title.innerText = "mouse is gone!";
}
title.addEventListener("click",handleTitleClick);
title.addEventListener("mouseenter", handleMouseEnter);
title.addEventListener("mouseleave", handleMouseLeave);
document의 body,head,title 이런것들은 중요하기 때문에
document.body.style~의 명령이 허용되지만, div같은것들은 호출이 안됨
나머지 element들은 querySelector나 getElementById로 불러와야됨!!!!!!!
*raw string really danger!
const h1 = document.querySelector("div.hello:first-child h1");
function handleTitleClick() {
// const clickedClass = `clicked sexy-font`;
// if(h1.classList.contains(clickedClass)){
// h1.classList.remove(clickedClass)
// }else{
// h1.classList.add(clickedClass)
// }
//
h1.classList.toggle("clicked") //한줄 요약
}
h1.addEventListener("click",handleTitleClick)