1. DOM (Document Object Model)
2. DOM의 사용
3. Event

1. DOM (Document Object Model)

DOM이란 웹페이지의 HTML을 계층화시켜 트리구조로 만든 객체 모델이다.

Javascript는 이 model로 웹페이지에 접근하고, 페이지를 수정할 수 있다. 즉, DOM은 HTML인 웹페이지와 스크립팅언어인 Javascript를 이어주는 역할이다.

그렇다면 JavaScript는 어떻게 HTML에 접근할 수 있을까? 바로 Javascript의 document라는 전역객체를 통해 접근할 수 있다. Javascript의 document 객체는 DOM 구조에 접근할 수 있는 문 역할을 해주고 이것은 HTML 문서를 나타낸다.

2. DOM의 사용

DOM을 사용하여 Javascript에서 HTML의 태그를 생성 및 제거, 수정을 할 수 있다.

document.body.innerHTML = '전체 내용을 대체';

위의 코드를 javascript상에서 실행하면 html에 수많은 요소가 있더라도 내용이 전부 대체되고 '전체 내용을 대체'라는 텍스트만 보이게 된다.

특정 요소에 접근해 내용을 바꾸고 싶을 때는 tag, class, id와 같은 css selector로 접근이 가능하다. 또한 querySelector를 사용할 수도 있다.

let changeRed = document.querySelector('.red');
changeRed.style.color = 'red';

해석을 해보면,
1) .red라는 속성을 가진 요소를 querySelector로 불러와changeRed라는 let 변수에 넣고,
2) 이 변수에 style="color: red";라는 문장을 적용한 것이다.

이 외에도, 새로운 element를 생성하는 .createElement, 생성한 element의 위치를 지정해주는 .appendChild 함수 등이 있다.

3. Event

event(이벤트)란 user들이 웹 상에서 특정 요소에 interactive한 반응을 할 수 있게 하는 것을 말한다.

이벤트를 달 때는 .addEventListener라는 함수를 이용한다.

element.addEventListener(이벤트종류, function() {
  // '이벤트종류'가 발생했을 때 실행할 내용
});

event의 종류

• click
• dbclick
• mousedown
• mouseup
• mouseenter
• mousemove
• select
• wheel
• keyup
• keydown 등 이벤트 종류는 너무 많지만 실제적으로 쓰는 이벤트는 그렇게 많지 않다.