HTML에서 JS연결하는 방법

JS에서 HTML을 불러오기, 접근하기, 변경하기

• Javascript는 위에서 아래로 읽기때문에 상황에 따라 틀리겠지만 되도록이면 바디의 제일 밑에 넣는게 좋다고 한다.

브라우저에서 그냥 사용할 수 있는 'document'라는 object를 배웠다.
document의 함수 중에는 getElementById라는 함수가 있는데,
이 함수가 HTML에서 id를 통해 element를 찾아준다.
element를 찾고 나면, JS로 해당 HTML의 무엇이든 바꿀 수 있다.
ex. element의 innerText를 바꾼다던가 (title.innerText = "Got you!";)
id, className 등을 가져올 수 있음. (cosole.log(title.id);)

• 요약 : 첫번째는 JS에서 document에서 항목들을 가져올 수 있는 것, 두번째는 이 document 항목들을 변경할 수 있다는 것이다.

querySelector

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

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

• querySelector : element를 CSS selector방식으로 검색할 수 있음 (ex. h1:first-child)
  단 하나의 element를 return해준다
  ⇒ hello란 class 내부에 있는 h1을 가지고 올 수 있다(id도 가능함)

• 첫번째 element만 가져옴
  

• 조건에 맞는 세개 다 가져오고 싶으면 querySelectorAll
  ⇒ 세개의 h1이 들어있는 array를 가져다 줌
  

• querySelector("#hello); 와 getElementById("hello"); 는 같은 일을 하는 것임
  하지만 후자는 하위요소 가져오는 것을 못하므로 전자만 쓸 것 같다.
  

event

• event: 어떤 행위를 하는 것
  모든 event는 js가 listen할 수 있음
• eventListener : event를 listen함 → js에게 무슨 event를 listen하고 싶은 지 알려줘야 함
• title.addEventListener("click") : 누군가가 title을 click하는 것을 listen할 거임 → 무언가를 해줘야 함

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

function handleTitleClick(){
title.style.color = "blue";
}
title.addEventListener("click", handleTitleClick);
//click하면 handleTitleClick이라는 function이 동작하길 원함
//그래서 handle~ 함수에 () 를 안넣은 것임
//즉, js가 대신 실행시켜주길 바라는 것임!

• function이 js에게 넘겨주고 유저가 title을 click할 경우에 js가 실행버튼을 대신 눌러주길 바라는 것임( 직접 handleTitleClick(); 이렇게 하는 것이 아니라)
• 함수에서 () 이 두 괄호를 추가함으로써 실행버튼을 누를 수 있는 거임