1. DOM(Document Object Model)
- DOM이란 웹페이지의 HTML을 계층화시켜 트리구조로 만든 객체모델이다.
- JS는 이 모델로 웹페이지에 접근하고 페이지를 수정할 수 있다.
- DOM은 HTML인 웹페이지와 스크립팅 언어(JS)를 서로 잇는 역할을 한다.
- JS는 document라는 전역객체를 이용하여 HTML에 접근할 수 있다.
- JS의 document 객체는 DOM 구조를 접근하는 관문이며, document객체는 HTML문서를 나타낸다고 말할 수 있다.
2. 왜 HTML에 접근해야 할까?
- document 객체는 DOM 트리의 root node에 접근하게 해준다.
- document 객체로 요소에 접근하듯, 이 요소의 속성에도 접근할 수 있다.
1) 요소 내용에 접근하여 수정하기
document.body.innerHTML = '내용 다 바꿈';2) 특정 요소에 접근하여 수정하기
let blueElement = document.querySelector('.blue');
blueElement.style.backgroundColor = 'blue';- background-color가 아닌 backgroundColor로 접근한 것에 주의하자
- JS에서는 하이픈(-)을 쓸 수 없기에 CamelCase로 접근한다.
3. Event
- 웹사이트에서 구현되는 interaction은 HTML이나 CSS만으로 구현할 수 없고 자바스크립트 코딩이 필요하다. 이렇게 특정 요소에 interactive한 반응을 할 수 있게 하는 것을 이벤트라고 한다.
- 이벤트의 종류: 아래와 같이 다양하다. (더 있다!!)
- 클릭 이벤트
- 마우스 이벤트
- 스크롤 이벤트
- 터치 이벤트
- resize(화면 크기 변화) 이벤트
참고 : https://www.w3schools.com/js/js_htmldom_eventlistener.asp
4. addEventListener
- 이벤트를 달때 사용하는 함수는 addEventListner이다. 이는 특정 이벤트가 언제 발생하는지 듣고있다가 발생하면 인자로 받은 함수를 실행시켜준다.
요소.addEventListener(이벤트종류, function() {
//이벤트가 일어났을 때 실행할 내용
});- 위와 같이 특정요소에 addEventListener를 붙이고 인자로 이벤트의 종류와 이벤트가 발생했을 대 실행할 함수를 전달한다.
- 이렇게 함수의 인자로 전달되는 함수를 콜백함수라고 부른다.
