[JS] Dom& Eventhandlers

Dom (Document Object Model)

DOM(돔)이란 웹페이지의 HTML을 계층화시켜 트리구조로 만든 객체(Object) 모델입니다.
JavaScript는 이 model로 웹 페이지에 접근하고, 페이지를 수정할 수 있습니다.

왜 HTML을 접근해야 할까?

document객체로 요소(element)에 접근하듯이 요소의 속성(attribute)에도 접근할 수 있습니다. 그렇게 class, id도 추가하고 style도 수정할 수 있습니다.

특정 element를 접근 or 생성

tag, class, id와 같은 css selector로 접근 가능합니다.

let blueElement = document.querySelector('.blue');
blueElement.style.backgroundColor = 'blue';

.createElement(tagName) 함수를 사용하면 요소(element)를 만들 수 있습니다.

Event 란?

요즘에는 화려하고 다양한 기능이 들어가는 웹 사이트가 늘어나면서 프론트앤드 개발자가 처리해야할 interaction이 더 많아졌습니다.

특정 요소에 interactive한 반응을 할 수 있게 하는 것을 이벤트라고 합니다.
클릭 이벤트
마우스 이벤트
스크롤 이벤트
터치 이벤트
resize(화면 크기 변화) 이벤트
등등 다양합니다.

이벤트를 달 때 사용하는 함수 이름은 addEventListener입니다.
종류 참고
:https://www.w3schools.com/js/js_htmldom_eventlistener.asp
https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener