DOM이란?

DOM이란 무엇일까요?

 

DOM (Document Object Model)은 HTML, XML 및 XHTML 문서를 나타내는 표준 프로그래밍 인터페이스입니다.

 

이를 사용하여 웹 페이지의 모든 콘텐츠, 구조 및 스타일을 변경하고 조작할 수 있습니다.

 

DOM은 문서를 노드 (node)로 나눕니다.

각 노드는 객체로 표현되며, 문서의 요소, 속성, 텍스트 노드, 주석 등을 포함합니다.

이러한 노드들은 계층 구조로 구성되어 있으며, 부모 노드와 자식 노드 간의 관계를 가집니다.

 

DOM API는 다양한 방법으로 문서의 노드를 선택하고 조작할 수 있습니다.

이를 통해 특정 요소의 콘텐츠를 변경하거나 스타일을 조정할 수 있습니다.

DOM API는 또한 이벤트 처리, 애니메이션 및 AJAX와 같은 고급 기술에 사용됩니다.

 

DOM을 사용하여 HTML 문서의 콘텐츠를 동적으로 조작할 수 있으며, 이를 통해 동적인 사용자 경험을 구현할 수 있습니다.

• 예를 들어, JavaScript를 사용하여 페이지의 색상, 이미지 및 텍스트를 변경하거나 사용자가 버튼을 클릭했을 때 새로운 콘텐츠를 로드할 수 있습니다.

 

이상적으로는, DOM 조작은 성능을 고려하여 수행되어야 합니다. DOM은 브라우저가 처리해야 하는 매우 큰 데이터 집합이므로,

잦은 DOM 조작은 성능 문제를 야기할 수 있습니다.

이를 방지하기 위해, DOM 조작은 가능한 한 적게 수행하고, 대신 변경 사항을 단일 조작으로 모아서 수행하는 것이 좋습니다.

 

---

아래는 DOM을 사용하여 웹 페이지에서 간단한 작업을 수행하는 몇 가지 예제입니다.

 

1. 문서에서 요소 선택하기

문서에서 요소를 선택하려면, document.querySelector()나 document.querySelectorAll() 메소드를 사용할 수 있습니다.

예를 들어, document.querySelector('#myElement')는 id가 myElement인 요소를 선택합니다.

const myElement = document.querySelector('#myElement');

 

2. 요소의 텍스트 변경하기

선택한 요소의 텍스트를 변경하려면, textContent 속성을 사용할 수 있습니다. 아래 예제는 myElement의 텍스트를 "Hello, world!"로 변경합니다.

myElement.textContent = 'Hello, world!';

 

3. 요소의 스타일 변경하기

요소의 스타일을 변경하려면, style 속성을 사용합니다. style 속성은 요소의 스타일을 변경할 수 있는 다양한 속성을 포함합니다.

예를 들어, myElement.style.color = 'red'는 myElement의 글꼴 색상을 빨간색으로 변경합니다.

myElement.style.color = 'red';

 

 

4. 새 요소 추가하기

새로운 요소를 추가하려면, document.createElement() 메소드를 사용합니다. 예를 들어, 아래 예제는 새로운 div 요소를 생성하고, 그 안에 새로운 텍스트를 추가합니다.

const newDiv = document.createElement('div');
newDiv.textContent = 'This is a new div element!';
document.body.appendChild(newDiv);

 

 

5. 이벤트 처리하기

이벤트를 처리하려면, addEventListener() 메소드를 사용합니다. 이 예제는 버튼이 클릭되었을 때 myElement의 텍스트를 변경합니다.

const myButton = document.querySelector('#myButton');
myButton.addEventListener('click', () => {
  myElement.textContent = 'Button clicked!';
});

 

위 예제들은 DOM API의 일부분에 불과합니다. DOM API는 더 많은 기능을 제공하며, 이를 통해 더 복잡한 작업을 수행할 수 있습니다.

위 예제를 참고하여 여러분만의 코드를 작성해보시길 바랍니다.