바닐라 JS DAY-4

The Document Object

• javascript는 HTML에 접근하고 읽을 수 있게 설정되어있다.
• 읽어올 뿐만 아니라 HTML을 변경할 수도 있다.
• document가 시작점
• document : body, head, title,,
• getElementById("id") : id 요소를 가져옴
• innerText : HTML 요소를 변경

<h1 id="title">grab me!</h1>

document.getElementById("title") // <h1 id="title">grab me!</h1>

const title = document.getElementById("title")

title.innerText = "Got you!" // Got you!
console.log(title.id); //title
console.log(title.className); // empty

---

Searching For Elements

• 많은 element를 한번에 가지고 와야하는 경우 getElementByClassName() 사용(array)
• querySelector() : element를 css 방식으로 검색 ✨
  • 단 하나의 첫번 째 element를 return 해줌
    -querySelectorAll() : selector 안의 조건에 부합하는 모든 element를 가져옴(array)

<div class="Hello">
  <h1>grab me!</h1>
</div>

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

console.log(title) //<h1>grab me!</h1>

---

Event

• addEventListener("evnet, function") : event가 발생하면 function을 실행시켜 준다.
  • funtion에 ()를 사용하지 않아야 이벤트 발생시 실행되게 해준다.
• removeEventListener : evett listenr 제거

<div class="Hello">
  <h1>grab me!</h1>
</div>

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

console.dir(title); // element의 내부를 보여줌

fucntion handleTitleClick(){
	h1.style.color = "blue";
}
fucntion handleMouseEnter(){
	h1.innerText = "mouse is here!"
}
fucntion handleMouseLeave(){
	h1.innerText = "mouse is gone!"
}
h1.addEventListener("click", handleTitleClick)
h1.onclick = handleTitleClick 
// 위 두 코드는 동일하나 addEventListener를 더 선호하는 이유는 removeEventListener로 evett listenr를 제거할 수 있기 때문이다.
h1.addEventListener("mouseenter", handleMouseEnter)
h1.addEventListener("mouseleave", handleMouseLeave)

Window

fucntion handleWindowResize(){
	document.body.style.backgroundColor = "tomato";
}
fucntion handleWindowCopy(){
	alert("copier!");
}
fucntion handleWindowOffline(){
	alert("SOS no WIFI!");
}
fucntion handleWindowOnline(){
	alert("All good");
}

window.addEventListener("resize", handleWindowResize) // 화면 조정
window.addEventListener("copy", handleWindowCopy) // 복사
window.addEventListener("offline", handleWindowOffline) // 와이파이 유무
window.addEventListener("online", handleWindowOnline)

참조 MDN

---

코딩챌린지

const title = document.querySelector("h2");
const superEventHandler = {
  handleMouseEnter: function () {
    title.innerText = "The mouse is here!";
    title.style.color = colors[0];
  },
  handleMouseLeave: function () {
    title.innerText = "The mouse is goen!";
    title.style.color = colors[1];
  },
  handleWindowResize: function () {
    title.innerText = "You just resized!";
    title.style.color = colors[2];
  },
  handleContextMenu: function () {
    title.innerText = "That was a right click!";
    title.style.color = colors[3];
  }
};

title.addEventListener("mouseenter", superEventHandler.handleMouseEnter);
title.addEventListener("mouseleave", superEventHandler.handleMouseLeave);
window.addEventListener("resize", superEventHandler.handleWindowResize);
window.addEventListener("contextmenu", superEventHandler.handleContextMenu);

• mouseenter : 마우스가 위로 올라갔을 때 발생하는 이벤트입니다.
• mouseleave : 마우스가 떠났을 때 발생하는 이벤트입니다.
• contextmenu : 사용자가 요소를 마우스 우 클릭해 메뉴를 열 때 발생하는 이벤트입니다.
• resize : 브라우저 창의 사이즈가 변할 때 발생하는 이벤트입니다

코드샌드박스로 보기