DOM(Document Object Model) 이해하기: 웹 페이지를 제어하는 데 필요한 모든 것

목화·2023년 5월 23일
0
post-thumbnail

이미지 출처 : 문서 객체 모델 - 위키백과, 우리 모두의 백과사전

1. DOM이란 무엇인가?

DOM (Document Object Model)은 웹 페이지의 구조를 표현하는 방법입니다. 그게 무슨 말이냐면, HTML이나 XML 같은 문서를 트리 구조로 바꿔서 자바스크립트 등으로 웹 페이지를 바꿀 수 있게 해줍니다.

예제:

// 웹 페이지의 body 부분을 가지고 오는 코드입니다.
var body = document.body;
console.log(body);

2. DOM의 구조

DOM은 '노드(node)'라는 부분들로 구성되어 있고, 이 노드들이 트리 모양으로 되어 있습니다. 웹 페이지에서의 태그들이 이 노드에 해당하며, 노드는 '요소 노드', '텍스트 노드', '주석 노드' 등으로 나뉩니다.

예제:

// 웹 페이지에서 모든 p 태그를 가지고 오는 코드입니다.
var paragraphs = document.getElementsByTagName('p');
console.log(paragraphs);

3. DOM과 JavaScript

JavaScript는 웹 페이지의 DOM을 바꾸고, 사용자와 상호작용하는 데 쓰는 언어입니다. JavaScript로 DOM 요소를 고르고, 그 내용을 바꾸거나 새로운 요소를 추가하고 지우는 등의 작업을 할 수 있습니다.

예제:

// 웹 페이지에서 특정 요소를 고르는 코드입니다.
var title = document.getElementById('title');

// 그 요소의 내용을 바꾸는 코드입니다.
title.textContent = 'Hello, DOM!';

4. DOM을 이용한 웹 페이지 제어

DOM을 이용하면 웹 페이지의 모든 부분을 제어할 수 있습니다. 요소를 고르거나, 스타일을 바꾸거나, 이벤트를 처리하거나, 요소를 추가하거나 지우는 등의 작업을 할 수 있습니다.

예제:

// 요소의 스타일을 바꾸는 코드입니다.
title.style.color = 'blue';

// 이벤트를 처리하는 코드입니다.
title.addEventListener('click', function() {
    alert('Title was clicked!');
});

5. DOM 메서드와 프로퍼티

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);

6. DOM 이벤트

DOM 이벤트는 웹 페이지에서 특정 행동(클릭, 스크롤, 키보드 입력 등)이 일어났을 때 발생하는 신호입니다. JavaScript를 이용해 이런 이벤트를 감지하고, 그에 맞게 웹 페이지를 제어할 수 있습니다.

예제:

// 버튼을 클릭했을 때 이벤트를 처리하는 코드입니다.
var button = document.getElementById('myButton');
button.addEventListener('click', function() {
    alert('Button was clicked!');
});

7. 실습: DOM을 이용한 간단한 웹 페이지 제작

이제 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);

8. 마무리

DOM을 이해하는 건 웹 개발에서 굉장히 중요한 부분입니다. 이 글을 통해 DOM의 기본적인 개념과 움직임, 그리고 JavaScript를 이용한 DOM 조작 방법에 대해 알아봤습니다. 계속해서 연습하고, 여러 가지 예제를 통해 DOM에 익숙해져 보세요. 다음 번에는 좀 더 복잡한 DOM 조작에 대해 알아보겠습니다.

profile
studying hard to take on new challenges _¢(・ω・`) still uncertain and unpredictable about which field I'll be diving deep into. just going with the flow

0개의 댓글