바닐라JS 챌린지 day4

3.0 Document Object

3.1 HTML in JS

• 자바스크립트를 이용해 브라우저를 인터랙티브하게 만들기
• html코드를 js관점으로 보는 것으로 시작
• 지금 js파일이 있기 때문에 js를 통해 html의 내용을 가져올 수 있는 거임
• document가 html이 js파일을 load하기 때문에 존재 → 그 다음에 browser가 우리가 document에 접근할 수 있게 해줌

3.2 Searching for Elements

• document : html을 가르키는 객체
• document.title 이라고하면 html의 title을 읽어옴
• document.body 라고하면 html의 body를 읽어옴
• document.title="Hi"; 마찬가지로 객체의 키로 값의 변경까지 가능함
• getElementsClassName(""); :단일 혹은 복수 (배열형태로가져옴)
• getElementsByTagName("태그이름");
• querySelector(""); : 첫번째 요소만 가져옴
• querySelectorAll(""); : 해당하는 요소 다 가져옴

3.3~3.5 Events

• event : 자바스크립트는 모든 브라우저를 리슨할수있음
• 리슨하는법 : addEventListener("동작명",실행함수)
• element의 내부를 보고 싶으면 console.dir()
  기본적으로 object로 표시한 element를 보여줌(전부 js object임)
  그 element 중 앞에 on이 붙은 것들은 event임
• event: 어떤 행위를 하는 것
  모든 event는 js가 listen할 수 있음
• eventListener : event를 listen함 → js에게 무슨 event를 listen하고 싶은 지 알려줘야 함
• title.addEventListener("click") : 누군가가 title을 click하는 것을 listen할 거임 → 무언가를 해줘야함

listen하고 싶은 event를 찾는 가장 좋은 방법은,
구글에 찾고 싶은 element의 이름, 예를들어 h1 html element mdn을 검색.
너무 복잡하면 element를 console.dir로 출력해서 on~ 이라고 적혀있는걸 사용하면 됨.

//이벤트 함수 만들기
function handleMouseEnter() {
title.innerText = "Mouse is here!"
}
function handleMouseLeave() {
title.innerText = "Mouse is gone!"
}
// 이벤트리스너 실행
title.addEventListener("mouseenter", handleMouseEnter);
title.addEventListener("mouseleave", handleMouseLeave);

• element를 찾아서 eventListener를 추가하고 event가 발생하면 반응해주기