자바스크립트 문서 객체 모델(DOM)

DOM이란?

자바스크립트의 문서 객체 모델(DOM)은 HTML 및 XML 문서의 프로그래밍적인 인터페이스입니다. DOM은 문서의 구조화된 표현을 제공하며, 프로그래밍 언어가 이 구조에 접근하여 문서를 수정할 수 있습니다.

DOM의 구성요소

HTML 페이지가 브라우저에 로드되면, 브라우저는 DOM 트리를 구성합니다. DOM 트리는 HTML 태그를 노드로 갖는 트리 구조입니다.

HTML 페이지에서는 다양한 노드 유형이 존재합니다. 가장 일반적인 노드 유형은 Element Node, Text Node, Comment Node 등이 있습니다.

const headingElement = document.createElement('h1'); 

const myText = document.createTextNode('This is a heading!'); 

headingElement.appendChild(myText); 
document.body.appendChild(headingElement); 

위 코드의 createElement() 메소드는 새롭게 생성된 h1 요소를 만듭니다. createTextNode() 메소드는 새로운 텍스트 노드를 만듭니다. 최종적으로, appendChild() 메소드를 사용하여 새롭게 생성된 노드를 기존의 노드에 추가합니다. 이를 통해, DOM을 수정하고 새로운 노드를 추가할 수 있습니다.

정리

자바스크립트의 문서 객체 모델(DOM)은 HTML 및 XML 문서의 프로그래밍적인 인터페이스입니다. DOM은 문서의 구조화된 표현을 제공하며, 프로그래밍 언어가 이 구조에 접근하여 문서를 수정할 수 있습니다. DOM은 브라우저가 HTML 페이지를 렌더링할 때 자동으로 생성됩니다.

키워드: 자바스크립트, DOM, HTML, XML, 브라우저