✔️ HTML에서 JavaScript를 동작하는 두 가지 방법에 대해 이해한다.
✔️ JavaScript에서 DOM을 이용해 HTML에 접근하고 조작할 수 있다.
✔️ 다양한 이벤트의 기능을 살펴보고 그 중 자주 사용하는 기능을 직접 사용해 본다.
✔️ addEventListener 함수를 사용해 이벤트를 생성하여 정적인 웹페이지를 동적으로 변화시킬 수 있다.
HTML -> CSS
<style>...</style>
HTML -> JS
JS -> HTML
DOM(Document Object Model)
웹페이지의 HTML을 계층화시켜 트리구조로 만든 객체(Object) 모델
JavaScript는 이 모델로 웹페이지에 접근하고, 페이지를 수정할 수 있습니다.
DOM은 웹페이지(HTML)와 Script언어(JavaScript)를 서로 잇는 역할.
JS에서 HTML에 접근해서 요소를 생성하고, 클래스를 부여하고, 스타일을 수정하고, 내용을 추가한다.
- querySelector('') 클래스, id, 태그를 모두 가져올 수 있다. 가장 첫번째 요소를 반환한다.
- getElementsByclassName('') 배열로 가져오기 때문에 인덱스가 필요하다.
- getElementsByTagName('') 배열로 가져오기 때문에 인덱스가 필요하다.
- getElementByIdName('') ID는 중복사용할 수 없기 때문에 단수형으로 쓴다.