[JS] document, html, elements, events

오늘도 재미나게 공부를 해보자

 

# The Document Object

 

*console.dir(document)와 console.log(document)의 차이는 아래 사이트 참고
https://jongbeom-dev.tistory.com/115

[JavaScript] Console 객체 (2)

 

- console에 document를 입력하면, 작성한 HTML을 가져올 수 있다.
- document는 브라우저에 존재하는 object이다.
- console에 console.dir(document)를 호출하면, document.title이 HTML에서 정의한 title이랑 같다.
- JS에서 HTML document 객체로 부터 title을 가져올 수 있다.
- JS는 HTML에 접근하고 읽을 수 있게 설정되어 있다. js를 통해 html를 바꿀 수도 있다. 

 

 

# HTML in Javascript 

 

브라우저에서 그냥 사용할 수 있는 'document'라는 object를 배웠다.
document의 함수 중 getElementById 라는 함수는 HTML에서 id를 통해 element를 찾아준다.
element를 찾고 나면, JS로 해당 HTML의 무엇이든 바꿀 수 있다.

ex. element의 innerText를 바꾼다던가     title.innerText = "Got you!"; 
      id, className 등을 가져 올 수 있음.     cosole.log(title.id);

 

*** document.getElementById("")   -> 이거 정말 많이 쓴다고 한다. 꼭 기억해두기!

 

 

# Searching For Elements

 

- getElementsByClassName() : 많은 element를 가져올때 씀(array를 반환)

- getElementsByTagName() : name을 할당할 수 있음(array를 반환)

- querySelector : 

      - element를 CSS selector방식으로 검색할 수 있음   ex. h1:first-child
      - 하나의 element만 return해줌  ex. hello란 class 내부에 있는 h1을 가지고 올 수 있다(id도 가능)
      - 첫번째 element만 가져옴
      - 조건에 맞는 세 개 모두 가져오고 싶으면 querySelectorAll -> 세개의 h1이 들어있는 array를 가져옴
      - querySelector(#hello); 와 getElementById("hello"); 는 같은 일을 함.

          -> but 후자는 하위요소를 못가져오므로 전자만 사용할 것

 

 

# Events

 

- 지금 js파일이 있기 때문에 js를 통해 html의 내용을 가져올 수 있는 거임
- document가 html이 js파일을 load → 그 다음에 browser가 우리가 document에 접근할 수 있게 해줌
- element의 내부를 보고 싶으면 console.dir()

   →  기본적으로 object로 표시한 element를 보여줌. (앞에 on이 붙은 것들은 event임)
- event: 어떤 행위를 하는 것. 모든 event는 js가 listen할 수 있음
- eventListener : event를 listen함 → js에게 무슨 event를 listen하고 싶은 지 알려줘야 함
- title.addEventListener("click") : 누군가가 title을 click하는 것을 listen할 거임 → 무언가를 해줘야함

const title = document.querySelector("div.hello:first-child h1");

function handleTitleClick(){
     title.style.color = "blue";
}

title.addEventListener("click",handleTitleClick);

 

click하면 handleTitleClick이라는 function이 동작하길 원함.

그래서 handle~ 함수에 ()를 안넣고, js가 대신 실행시켜주길 바라는 것!

- 유저가 title을 click할 경우에 js가 실행버튼을 대신 눌러주길 바라는 것 (직접 handleTitleClick(); 이렇게 하지 X)
- 함수에서 () 추가 = 실행버튼을 누름

 

- listen하고 싶은 event를 찾을 때는 구글에 찾고 싶은 element의 이름 검색 (ex. h1 html element mdn)
- javascript 관점의 html element를 원하니 링크에 Web APIs라는 문장이 포함된 페이지를 찾아야 함.
- 아니면 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);

-  But 대부분의 경우 style은 CSS를 통해 변경되어야 함 (추후 공부 예정)

 

title.onclick = handleMouseEnter;
title.addEventListener(“mouseenter” , handleMouseEnter);

-  위에 두 코드는 동일하나 addEventListener를 선호함.

-  removeEventListener을 통해 event listener을 제거할 수 있기 때문.

- document에서 body,head,title 은 중요해서 언제든 document.body 로 가져올수있지만
- div나 h1 등 element 들은 querySelector getElementById등으로 찾아야한다.
ex) document.querySelector(“h1”);

- window는 기본제공
function handleWindowResize(){
document.body.style.backgroundColor = “tomato”;
}
function handleWindowCopy(){
alert(“copier”);
}

window.addEventListener(“resize”, handleWindowResize);
window.addEventListener(“copy”, handleWindowCopy);