[javascript] 문서 객체 모델(DOM)

07 Dec 2023

javascript

문서 객체 모델(DOM)은 HTML 문서나 XML 문서의 구조를 표현하고 접근하고 조작하기 위한 프로그래밍 인터페이스입니다. DOM은 문서의 각 요소(element)를 나타내는 노드(node)로 구성되어 있으며, 이 노드들을 사용하여 문서의 내용을 동적으로 변경할 수 있습니다.

DOM의 구조

DOM은 트리 구조로 이루어져 있습니다. HTML 문서의 최상위 노드는 document 객체이며, document 객체는 문서 전체를 나타냅니다. 이 document 객체는 HTML의 <html> 요소의 부모 노드입니다. <html> 요소는 다시 <head> 요소와 <body> 요소로 나뉘어져 있고, 이들 요소들은 또 다른 요소들을 자식 노드로 갖게 됩니다. 이렇게 요소들이 계층적으로 구성되어 문서를 표현하는 것이 DOM의 핵심 개념입니다.

DOM 요소 접근하기

DOM을 사용하여 문서 요소에 접근하는 방법은 다양합니다. 가장 일반적인 방법은 getElementById() 메서드를 사용하는 것입니다. 이 메서드는 주어진 id 값과 일치하는 요소를 반환합니다. 예를 들어, 아래의 HTML 코드에서 myElement라는 id를 가진 요소에 접근하려면 다음과 같이 할 수 있습니다.

let element = document.getElementById("myElement");

element 변수에는 id가 myElement인 요소가 할당됩니다. 이렇게 요소에 접근한 후에는 해당 요소의 속성이나 스타일 등을 변경할 수 있습니다.

DOM 요소 변경하기

DOM을 사용하여 요소를 변경할 때에는 해당 요소의 프로퍼티에 접근하여 값을 수정하면 됩니다. 예를 들어, 아래의 HTML 코드에서 <h1> 요소의 텍스트를 변경하려면 다음과 같이 할 수 있습니다.

let heading = document.getElementsByTagName("h1")[0];
heading.textContent = "새로운 제목";

위의 코드에서 getElementsByTagName() 메서드는 주어진 태그 이름과 일치하는 요소들을 배열로 반환합니다. [0]은 배열의 첫 번째 요소를 의미하므로, 첫 번째 <h1> 요소에 접근하게 됩니다. 이후에는 textContent 프로퍼티를 사용하여 텍스트를 변경할 수 있습니다.

결론

문서 객체 모델(DOM)은 HTML 문서나 XML 문서의 구조를 프로그래밍적으로 접근하고 조작할 수 있는 인터페이스입니다. DOM을 사용하면 웹 페이지의 동적인 변경이 가능해지며, 사용자와 상호작용하는 웹 애플리케이션을 만들 수 있습니다.

더 자세한 내용은 MDN 웹 문서 객체 모델(DOM) 소개을 참고해주세요.