Document Object

Document Object는 HTML Element라고 생각하면 편하다. 이 때,Javascript가 HTML 문서의 요소에 접근할 수 있는 방법들이 2가지 존재한다. 따라서 먼저 HTML Element에 대한 이해가 필요하다.

1. getElementById( ) (Function)
   이 함수의 경우, 변수에 선택할 HTML Element의 Id를 입력해야한다.
2. queryselector( ) (Function)
   이 함수의 경우, 변수에 선택할 HTML Element를 CSS Selector 형식으로 입력해야한다.

Event

웹 페이지에서 일어나는 상황이다. Click, Submit, Change 등 웹 페이지 상에서 우리가 하는 모든 행동들을 event라고 생각하면 편하다. Javascript에서 이러한 event들이 일어나는지 확인할 수 있는 방법이 존재한다.

addEventListener()

이 함수의 경우, 앞에 어떤 HTML Element의 일어나는 event를 관찰할 것인가에 대한 내용이 필요하다. 그래서 앞서 Document Object에서 HTML Element에 접근하여 addEventListener()을 통해서 event를 관찰한다.

addEventListener( )의 경우, 2가지의 입력 변수를 받는다.

1. event
2. function

해당 HTML Element에 event가 발생하면 function을 실행하는 기능을 구현하고 싶을 때 사용하면 된다.