이미지 출처 : 문서 객체 모델 - 위키백과, 우리 모두의 백과사전
DOM (Document Object Model)은 웹 페이지의 구조를 표현하는 방법입니다. 그게 무슨 말이냐면, HTML이나 XML 같은 문서를 트리 구조로 바꿔서 자바스크립트 등으로 웹 페이지를 바꿀 수 있게 해줍니다.
예제:
// 웹 페이지의 body 부분을 가지고 오는 코드입니다.
var body = document.body;
console.log(body);
DOM은 '노드(node)'라는 부분들로 구성되어 있고, 이 노드들이 트리 모양으로 되어 있습니다. 웹 페이지에서의 태그들이 이 노드에 해당하며, 노드는 '요소 노드', '텍스트 노드', '주석 노드' 등으로 나뉩니다.
예제:
// 웹 페이지에서 모든 p 태그를 가지고 오는 코드입니다.
var paragraphs = document.getElementsByTagName('p');
console.log(paragraphs);
JavaScript는 웹 페이지의 DOM을 바꾸고, 사용자와 상호작용하는 데 쓰는 언어입니다. JavaScript로 DOM 요소를 고르고, 그 내용을 바꾸거나 새로운 요소를 추가하고 지우는 등의 작업을 할 수 있습니다.
예제:
// 웹 페이지에서 특정 요소를 고르는 코드입니다.
var title = document.getElementById('title');
// 그 요소의 내용을 바꾸는 코드입니다.
title.textContent = 'Hello, DOM!';
DOM을 이용하면 웹 페이지의 모든 부분을 제어할 수 있습니다. 요소를 고르거나, 스타일을 바꾸거나, 이벤트를 처리하거나, 요소를 추가하거나 지우는 등의 작업을 할 수 있습니다.
예제:
// 요소의 스타일을 바꾸는 코드입니다.
title.style.color = 'blue';
// 이벤트를 처리하는 코드입니다.
title.addEventListener('click', function() {
alert('Title was clicked!');
});
DOM에서는 다양한 메서드와 프로퍼티를 이용할 수 있습니다. getElementById()
, querySelector()
, createElement()
, appendChild()
등의 메서드로 DOM 요소를 고르거나 만들거나 추가할 수 있습니다. 또, innerHTML
, textContent
, style
등의 프로퍼
티로 DOM 요소의 내용이나 스타일을 바꿀 수 있습니다.
예제:
// 새로운 요소를 만드는 코드입니다.
var newParagraph = document.createElement('p');
// 새로운 요소의 내용을 설정하는 코드입니다.
newParagraph.textContent = 'This is a new paragraph.';
// 새로운 요소를 웹 페이지에 추가하는 코드입니다.
document.body.appendChild(newParagraph);
DOM 이벤트는 웹 페이지에서 특정 행동(클릭, 스크롤, 키보드 입력 등)이 일어났을 때 발생하는 신호입니다. JavaScript를 이용해 이런 이벤트를 감지하고, 그에 맞게 웹 페이지를 제어할 수 있습니다.
예제:
// 버튼을 클릭했을 때 이벤트를 처리하는 코드입니다.
var button = document.getElementById('myButton');
button.addEventListener('click', function() {
alert('Button was clicked!');
});
이제 DOM을 이용해 간단한 웹 페이지를 만들어 보겠습니다. 코드는 이렇게 됩니다.
// 웹 페이지에서 특정 요소를 고르는 코드입니다.
var title = document.getElementById('title');
// 그 요소의 내용을 바꾸는 코드입니다.
title.innerHTML = 'Hello, DOM!';
// 새로운 요소를 만드는 코드입니다.
var newParagraph = document.createElement('p');
// 새로운 요소의 내용을 설정하는 코드입니다.
newParagraph.innerHTML = 'This is a new paragraph.';
// 새로운 요소를 웹 페이지에 추가하는 코드입니다.
document.body.appendChild(newParagraph);
DOM을 이해하는 건 웹 개발에서 굉장히 중요한 부분입니다. 이 글을 통해 DOM의 기본적인 개념과 움직임, 그리고 JavaScript를 이용한 DOM 조작 방법에 대해 알아봤습니다. 계속해서 연습하고, 여러 가지 예제를 통해 DOM에 익숙해져 보세요. 다음 번에는 좀 더 복잡한 DOM 조작에 대해 알아보겠습니다.