wecode 5. DOM + Event

웹에서 HTML, CSS, Javascript의 기능

🟧 HTML = 컴퓨터가 이해할 수 있는 문서를 작성하는 언어

🟦 CSS = 문서를 시각적으로 꾸며주기 위한 스타일 시트

🟨 Javascript = 정적인 웹을 동적으로 만들어주는 언어

HTML에서 Javascript를 연결하는 방법

1. <script> 태그 안에 js코드 짜기
2. <script> 태그를 통해 별도의 js파일 가져오기

DOM의 정의와 기능

자바스크립트가 HTML의 요소에 접근하는 방법, HTML과 JS이 중간다리 역할.
HTML로 쓰여진 문서를 계층화시켜 트리 구조의 객체 모델로 변환시킨 것.

DOM을 이용하여 HTML 요소에 접근

document 요소에 접근하는 메소드

• getElementsByClassName : 배열 형태로 가져옴
• getElementById : 아이디로 한 요소를 가져옴
• querySelector : CSS 선택자 사용 가능
• querySelectorAll : CSS 선택자 사용 가능 + 배열

const logo = getElementsByClassName(”logo”)[0];
logo.style.backgroundColor = “yellow”

// 첫번째 .logo 요소의 배경색을 노랑으로 바꿈

메소드들 간의 차이
하나의 요소만 가져옴 vs 여러개의 요소들을 배열의 형태로 가져옴
CSS선택자 사용 가능 vs 불가능

Event의 정의와 기능

브라우저 위에 일어나는 모든 사건들 ➡️ interation

좋은 웹사이트의 기준

• 오류 없음
• 이동 자연스러움, 부드러움
• 이벤트에 빠르게 반응하여 불편함 일으키지 않음
  

addEventListener

어떤 이벤트가 해당 요소에 발생하는 것을 감시하고 있는 것 → 발생 시 인자로 받은 함수 실행

요소.addEventListener("이벤트종류", 콜백함수);

이벤트가 일어났을 때, 인자로 전달받은 함수를 실행 (Call!)