[자바 스크립트] DOM

DOM 이란? 

• 문서 객체 모델(Document Object Model): 문서 객체 모델 객체 지향 모델로써 구조화된 문서를 표현하는 형식
• HTML 문서에 대한 인터페이스: DOM은 XML이나 HTML 문서의 프로그래밍 인터페이스
• DOM은 문서의 구조화된 표현(structured representation)을 제공하여 프로그래밍 언어가 문서 구조, 스타일, 내용 등을 변경할 수 있도록 한다.

DOM의 종류

• Core DOM: 모든 문서 타입을 위한 DOM 모델
• HTML DOM: HTML 문서를 위한 DOM 모델
• XML DOM: 문서를 위한 DOM 모델

HTML DOM

• HTML DOM: HTML 문서를 조작하고 접근하는 표준화된 방법, 모든 HTML 요소는 HTML DOM을 통해 접근 가능

XML DOM

• XML문서에 접근하여 그 문서를 다루는 표준화된 방법을 정의, 모든 XML 요소는 XML DOM을 통해 접근 간으

Document 객체

• Document 객체는 웹페이지를 의미한다.
• 웹페이지에 존재하는 HTML요소에 접근하고자 할 때는 반드시 Document 객체부터 시작해야 한다.

DOM의 트리 구조 (HTML -> DOM)

DOM 요소의 선택

// HTML <li> 요소를 선택
var selectedItem = document.getElementsByTagName("li");

// 아이디가 "id"인 요소를 선택
var selectedItem = document.getElementById("id");

// 클래스가 "odd"인 요소를 선택
var selectedItem = document.getElementsByClassName("odd");

// name 속성값이 "first"인 요소를 선택
var selectedItem = document.getElementsByName("first");

DOM 요소의 스타일 변경

// 아이디가 "even"인 요소를 선택
var selectedItem = document.getElementById("even");

// 선택된 요소의 텍스트 색상을 변경
selectedItem.style.color = "red";

DOM 요소의 내용 변경

// 아이디가 "text"인 요소를 선택
var str = document.getElementById("text");

// 선택된 요소의 내용을 변경
str.innerHTML = " 요소의 내용을 바꿉니다";