DOM(Document Object Model)
돔(DOM)이란 웹페이지의 html 을 계층화 시켜 트리구조로 만든 객체(Object)(키와 값이 있겠지?) '모델'이다.
트리구조는 예를들어 아래와 같다
html-><head>-><meta>,<style>...
-><body>-><div>,<span>...이 '모델'을 통해 Js는 웹페이지에 접근하고 페이지를 수정할 수 있다.
따라서 다시 말하면 DOM은 Html과 JS(프로그래밍언어)를 연결하는 역할을 한다.
Document
Js가 Html에 접근하는 방법은 document라는 전역객체를 통해서이다.
JS의 document객체는 DOM구조를 접근하는 관문이며, document객체자체는 HTML문서를 나타낸다고 말할 수 있다.
굳이 이렇게 하는이유
API를통해 전달되는 다량의 데이터를 document객체를 통해 DOM tree의 root node에 접근하여 요소와 속성을 바꾸기 위해서이다.
document는 객체이다
Windows라는 최상위 객체안에 있는 객체이며 Windows는 유일무이한 객체이기에 생략을 하고 사용한다.
그리고 document는 html과 동일하다고 보면된다.
요소와 속성을 바꿔주는 tag들
document.body.innerHTML = "이렇게하면 body안에 내용이 다 지워지고 글이 들어감"
//html의 body에 내용을 채우겠다는 뜻
let blueElement = document.querySelector("아이디 클래스 태그네임을 통해 접근")
blueElement.style.backgroundColor = "이렇게 배경색을 바꿔줄 수 있다."Event란?
interaction(마우스를 올렸을때 다른각도의 제품사진으로 바꿔보여주는것 등을 말한다.)은 HTML이나 CSS만으로 구현할 수 없고 자바스크립트 코딩이 필요합니다.
이렇게 특정요소에 상호작용으로 반응할 수 있게 하는 것일 이벤트라한다.
예를 들어 아래와 같은 것이 있다.
* 클릭 이벤트
* 마우스 이벤트
* 스크롤 이벤트
* 터치 이벤트
* resize(화면 크기 변화) 이벤트
등 등addEventListener
이벤트를 달 때 사용하는 함수이름이다. 특정 이벤트 발생 시 인자로 받은 함수를 실행 시킨다.
이렇게 함수를 인자(대부분 string,number,date...)로도 보낼 수 있는데 이런 인자로 전달된 함수를 콜백함수라고한다.
이벤트의 종류는 click, mousemove, keyup 등등이 있다.
