DOM이란?
DOM은 Document Object Model의 약자로 Document의 요소들을 Object 객체로 표현하여 JavaScript가 DOM과 상호작용하여 있고 웹사이트를 변경할 수 있다. 이렇게 정적인 HTML에 동적인 JavaScript의 연결을 도와주는 interface가 DOM이다. 프로그래밍 언어에서 접근 할수 없었던 HTML의 Document 문서를 구조화된 표현으로 접근 할 수 있는 방법을 제공한것이 DOM이다.
크롬브라우저에서 개발자도구를 통해 어떻게 이 웹페이지가 구성되어있는지 Element tab을 통해서 확인 할 수 있다. 이때 보여지는 HTML의 코드들은 모든코드가 아니라 웹사이트의 실제 문서 객체 모델이다. JavaScript는 직접 HTML문서에 Element를 넣지않고도 JavaScript 에서 DOM을 이용해 Element를 넣을 수 있고 속성을 부여할 수도 있다.
개발자 도구
페이지에서 오른쪽 클릭 + 검사
윈도우 : control + shift + i / F12
Mac : command + alt + i
크롬브라우저의 주소창에 chrome://newtab 을 입력하면 빈 페이지가 나온다. 여기서 개발자 콘솔을 열어서 console tab에 JavaScript 코드를 작성해서 확인해 볼 수 있다. HTML의 script Element에 <script> JavaScript </script> 자바스크립트 코드를 입력하기도 하고 script tag의 속성에 직접 작성한 JavaScript 파일을 src 속성을 이용해 연결하여 사용하기도 한다. 다 입력하고 페이지를 확인하는 것은 번거롭기 때문에 이 콘솔창에서 간단하게 어떻게 동작하는지 확인하면 HTML문서 작성을 하지 않고도 확인할 수 있기 때문에 간편하다. 물론 저장되는 것은 아니기 때문에 확인하는 용도로 사용한다.
빈페이지에 contsole과 Element tab을 같이 띄우고 console에서 Element를 추가해보자
let body = document.querySelector('body');
// body Element를 변수 body에 할당
let h1tag0 = document.createElement('h1');
// div Element를 생성하고 h1tag 변수에 할당
h1tag.setAttribute('id', 'title');
// h1tag 의 h1 Element에 'id' 속성의 값을 'title'로 지정
h1tag.textContent = "Welcome";
// h1 Element에 들어가는 내용을 할당
// 아직 페이지에는 아무런 반응이 없다. 생성하고 속성을 지정했어도 이 Element가
// 보여지려면 현재 보이고 있는 Element에 생성한 h1 Element를 연결해야 한다.
Element 왼쪽에 제일 왼쪽에 있는 화살표가 있는 곳을 누르면 페이지에 나오는 Element에 대한 정보를 선택하면서 확인할 수 있다.
이것을 누르고 빈 웹 페이지의 화면에 마우스를 올려 놓으면 아래와 같은 화면이 나온다.
지금 보이는 Element는 body가 있다. 그리고 body 영역 밖에 마우스를 올려 놓으면
이 html Element도 확인해 볼 수 있다.
Element 탭에서 확인해보면 body가 html의 안에 속해 있는 것을 볼 수 있다.
화면에 보여지는 Element에 생성해던 Element를 연결해주면 웹페이지에 볼 수 있다.
let body = document.querySelector('body');
// body Element를 변수 body에 할당
let h1tag = document.createElement('h1');
// h1 Element를 생성하고 h1tag 변수에 할당
h1tag.setAttribute('id', 'title');
// h1tag 의 h1 Element에 'id' 속성의 값을 'title'로 지정
h1tag.textContent = "Welcome";
// h1 Element에 들어가는 내용을 할당
body.append(h1tag);
// body Elememt 에 h1 Element를 연결연결하면 Element를 생성하고 내용을 할당했던 Welcome이 빈 화면에 나오는 것을 볼 수 있다.
이렇게 HTML 문서를 직접 작성하지 않고도 JavaScript로 HTML를 다룰 수 있게 만들어주는 인터페이스를 중간에서 담당하는 것이 DOM 이다.
