[JS] 문서 객체 모델 DOM 개념과 자바스크립트

DOM이란?

DOM은 문서 객체 모델(Document Object Model)로 객체 지향 모델로써 구조화된 문서를 표현하는 형식이다.

DOM은 XML이나 HTML 문서의 프로그래밍 인터페이스이다.

DOM은 문서의 구조화된 표현(structured representation)을 제공하여 프로그래밍 언어가 문서 구조, 스타일, 내용 등을 변경할 수 있도록 한다.

 

---

 

DOM의 종류

• Core DOM 
• HTML DOM
• XML 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 요소 선택
• HTML 요소 생성
• HTML 이벤트 핸들러 추가
• HTML 객체 선택

 

 

HTML 요소 선택

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

 

 

HTML 요소 생성

메서드	설명
document.createElement()	지정된 HTML 요소 생성
document.write()	텍스트 출력

 

 

HTML 이벤트 핸들러 추가

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

 

 

---

 

 

DOM 요소 선택

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

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

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

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

 

DOM 요소 스타일 변경

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

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

 

DOM 요소의 내용 변경

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

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