DOM ( Document Object Model) 이란?
문서 객체 모델이라고 하며 HTML XML 문서를 Javascript에서 접근할 수 있도록 Object화 해주는 기술을 말합니다.
웹페이지는 하나의 문서(Document)입니다.
웹페에지의 구조를 Object로 만들어 JavaScript에서 내용을 변경하고, 저장하는 등의 조작이 가능해집니다.
즉, DOM을 사용하게 되면, HTML 에 프로그래밍 방식으로 접근할 수 있게 되는거죠!
우리의 웹 브라우저는 HTML페이지를 서버에서 받아온 후, HTML을 로드할때 DOM을 함께 생성합니다.
이렇게 되면, DOM이 HTML과 Javascript간의 인터페이스 (소통창구) 역할을 하게 되는거죠.
그래서 DOM 기술로 우리는 동적 웹페이지를 만들 수 있습니다.
- HTML 요소 및 속성을 추가, 변경, 제거 가능
- CSS 스타일 변경
- 새로운 이벤트 생성, 이벤트 반응
아래 예제를 확인해볼까요? (코드 출처)
<html>
<head>
<script>
// HTML이 로딩될때(DOM이 사옹 가능할때), windows.onload 함수야 시작되라!
window.onload = function() {
// 변수 선언 (h1 element 생성, elementdp 텍스트 추가)
var heading = document.createElement("h1");
var heading_text = document.createTextNode("Big Head!");
// 문서 트리에 h1을 추가한다. <h1>bigHead!</h1>과 같은 결과 출력된다.
heading.appendChild(heading_text);
document.body.appendChild(heading);
}
</script>
</head>
<body>
</body>
</html>완전 신기하죠!
이 DOM기술로 우리는 정말 많은것을 할 수 있습니다. Document의 객체 표기방법을 확인해봅니다.
먼저, index.html을 생성하고 웹브라우저에서 실행시켜봅니다.
실행 결과 평범한 html 페이지가 생성됩니다.
<DOCTYPE html>
<html>
<head>
<title>hello!</title>
</head>
<body>
<H1 id="title">This is Test Page!</H1>
<p>This is test text!</p>
</body>
</html>
이제 DOM이 실행되고, HTML페이지가 어떻게 객체화 되었는지 확인해봅니다.
html에 코드를 추가합니다.
<DOCTYPE html>
<html>
<head>
<title>hello!</title>
</head>
<body>
<H1 id="title">This is Test Page!</H1>
<p>This is test text!</p>
<script>
console.dir(document); // document 전체의 객체 목록을 확인해보자
</script>
</body>
</html>웹브라우저에서 도구 > Console탭을 확인합니다.
#document 아래의 목록이 바로 자바스크립트로 컨트롤 할 수 있는 객체 목록입니다!!
이렇게 나오는 객체 목록을 가지고 우리는 HTML을 수정할 수 있습니다.
먼저, 타이틀을 바꿔볼까요?
객체 목록에서 title을 확인할수 있네요!
코드를 변경해봅니다.
<DOCTYPE html>
<html>
<head>
<title>hello!</title>
</head>
<body>
<H1 id="title">This is Test Page!</H1>
<p>This is test text!</p>
<script>
console.dir(document); // document 전체의 객체 목록을 확인해보자
document.title = "change!" // title 내용을 변경해보자!
</script>
</body>
</html>
그리고 웹브라우저에서 다시한번 로딩 해보면!!
네~~! 이렇게 title 이 변경되었습니다.
더 학습하기위해서 아래 Examples 을 확인하세요 👍🏻
developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Examples
Examples - Web API | MDN
Examples 이 장에서는 DOM을 사용한 웹, XML 개발의 긴 예제를 제공합니다. 예제는 문서의 object를 조작하기 위해 가능한 JavaScript의 일반적인 API, 트릭, 패턴을 사용합니다. 아래의 예제는 다양한 면
developer.mozilla.org