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

DOM 이란?

DOM의 개념 / tcpschool.com

문서 객체 모델 ( Document Object Model )

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

 

DOM의 종류

Core DOM

• 모든 문서 타입을 위한 DOM 모델

HTML DOM

• HTML 문서를 위한 DOM 모델
• HTML 문서를 조작하고 접근하는 표준화된 방법
• 모든 HTML 요소는 HTML DOM을 토해 접근 가능

XML DOM

• 문서를 위한 DOM 모델
• XML 문서에 접근하여 그 문서를 다루는 표준화된 방법을 정의
• 모든 XML 요소는 XML DOM을 통해 접근 가능

 

Document 객체

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

 

Document 메소드

HTML 요소와 관련된 작업을 도와주는 다양한 메소드 제공

• HTML 요소의 선택

메소드	설명
document.getElementById()	해당 아이디의 요소를 선택
document.getElementsByClassName()	해당 클래스에 속한 요소를 선택
document.getElementsByName()	해당 name 속성값을 가지는 요소를 선택
document.querySelectorAll()	해당 선택자로 선택되는 요소를 모두 선택
document.querySelector()	해당 선택자로 선택되는 요소를 1개 선택

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

 

 

• HTML 요소의 생성

메소드	설명
document.createElement()	지정된 HTML 요소를 생성
document.write()	HTML 출력 스트림을 통해 텍스트를 출력

 

• HTML 이벤트 핸들러 추가

속성	설명
요소.onclick = function(){ ... }	마우스 클릭 이벤트와 연결될 이벤트 핸들러

 

DOM 요소의 스타일 변경

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

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

DOM 요소의 내용 변경

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

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