[노마드코더] 바닐라 JS로 크롬 앱 만들기 #02

DOM : Document Object Model

자바스크립트로 HTML를 object 형태로 제어(읽고 수정하고 추가 등)할 수 있음! 

const hello = document.getElementById("Hi");
const hello = document.getElementByClassName("Hi");

---

querySelector - element를 CSS 방식으로 가져올 수 있음, 단 하나의 element를 가져옴
(여러개의 경우 제일 첫번째 것만 가져옴)

querySelectorAll - 조건에 부합하는 모든 element를 가져옴

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

---

addEventListener

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

function handleMouseClick() {
  h1.style.color = "blue"
}

function handleMouseEnter() {
  h1.innerHTML = "Mouse is here!"
}

function handleWindowResize() {
  document.body.style.backgroundColor = "tomato";
}

function handleWindowCopy() {
  alert("copier!");
}

// onclick 과 같이 할수도 있지만 removeEventListener 를 할 수 있기에 이 방법을 더 선호! 
h1.addEventListener("click", handleMouseClick);
h1.addEventListener("mouseenter", handleMouseEnter);

// h1.onclick = handleMouseClick;
// h1.onmouseenter = handleMouseEnter;

window.addEventListener("resize", handleWindowResize);
window.addEventListener("copy", handleWindowCopy);