[JavaScript] DOM / Document 객체

Language/JavaScript [JavaScript] DOM / Document 객체

Dexter_- 2018. 10. 19. 18:21

728x90

문서 객체 모델(DOM) 이란?

문서 객체 모델(DOM, Document Object Model)은 XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스이다.

이 객체 모델은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공한다. 이러한 DOM은 W3C의 표준 객체 모델이며, 다음과 같이 계층 구조로 표현된다.

자바스크립트는 이러한 객체 모델을 이용하여 다음과 같은 작업을 할 수 있다.

자바스크립트는 새로운 HTML 요소나 속성을 추가할 수 있다.
자바스크립트는 존재하는 HTML 요소나 속성을 제거할 수 있다.
자바스크립트는 HTML 문서의 모든 HTML 요소를 변경할 수 있다.
자바스크립트는 HTML 문서의 모든 HTML 속성을 변경할 수 있다.
자바스크립트는 HTML 문서의 모든 CSS 스타일을 변경할 수 있다.
자바스크립트는 HTML 문서에 새로운 HTML 이벤트를 추가할 수 있다.
자바스크립트는 HTML 문서의 모든 HTML 이벤트에 반응할 수 있다.

DOM의 종류

W3C DOM 표준은 세 가지 모델로 구분된다.

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

HTML DOM

HTML DOM은 HTML 문서를 조작하고 접근하는 표준화된 방법을 정의한다. 모든 HTML 요소는 HTML DOM를 통해 접근할 수 있다.

XML DOM

XML DOM은 XML 문서에 접근하여, 그 문서를 다루는 표준화된 방법을 정의한다. 모든 XML 요소는 XML DOM를 통해 접근할 수 있다.

Document 객체

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

Document 메소드

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

HTML 요소의 선택
HTML 요소의 생성
HTML 이벤트 핸들러 추가
HTML 객체의 선택

HTML 요소의 선택

HTML 요소를 선택하기 위해 제공되는 메소드는 다음과 같다.

메소드	설명
document.getElementsByTagName(태그이름)	해당 태그 이름의 요소를 모두 선택함
document.getElementsById(아이디)	해당 아이디의 요소를 선택함
document.getElementsByClassName(클래스이름)	해당 클래스에 속한 요소를 모두 선탁함
document.getElementsByName(name속성값)	해당 name 속성값을 가지는 요소를 모두 선택함
document.querySelectorAll(선택자)	해당 선택자로 선택되는 요소를 모두 선택함

이 중에서 document.querySelectorAll() 메소드는 브라우저별로 지원 여부가 다르다.

document.querySelectorAll() 메소드를 지원하는 주요 웹 브라우저의 버전은 다음과 같다.

메소드
document.querySelectorAll( )	9.0	1.0	3.5	3.2	10.0

HTML 요소의 생성

새로운 HTML 요소를 생성하기 위해 제공되는 메소드는 다음과 같다.

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

HTML 이벤트 핸들러 추가

HTML 요소에 이벤트 핸들러를 추가하기 위해 제공되는 메소드는 다음과 같다.

메소드	설명
document.getElementById(아이디).onclick = function() { 실행할 코드 }	마우스 클릭 이벤트와 연결될 이벤트 핸들러 코드를 추가함

HTML 객체의 선택

HTML DOM Level 1은 1998년에 정의되어, HTML5에서도 계속 사용되고 있다.

그 후 2004년에는 HTML DOM Level 3가 새롭게 정의되어, Level 1과 같이 사용되고 있다.

이러한 HTML DOM에서 제공하는 객체 집합(object collection)을 이용하면 HTML 객체를 손쉽게 선택할 수 있다.

객체 집합	설명	DOM Level
document.anchors	name 속성을 가지는 <a>요소를 모두 반환함	1
document.applets	applet요소를 모두 반환함 (HTML5에서 제외됨)	1
document.body	<body>요소를 반환함	1
document.cookie	HTML 문서의 쿠키(cookie)를 반환함	1
document.domain	HTML 문서가 위치한 서버의 도메인 네임(domain name)을 반환함	1
document.forms	<form>요소를 모두 반환함	1
document.images	<img>요소를 모두 반환함	1
document.links	href 속성을 가지는 <area>요소와 <a>요소를 모두 반환함	1
document.referrer	링크(linking)되어 있는 문서의 URI를 반환함	1
document.title	<title>요소를 반환함	1
document.URL	HTML 문서의 완전한 URL 주소를 반환함	1
document.baseURI	HTML 문서의 절대 URI(absolute base URI)를 반환함	3
document.doctype	HTML 문서의 문서 타입(doctype)을 반환함	3
document.documentElement	<html>요소를 반환함	3
document.documentMode	웹 브라우저가 사용하고 있는 모드를 반환함	3
document.documentURI	HTML 문서의 URI를 반환함	3
document.domConfig	HTML DOM 설정을 반환함 (더는 사용하지 않음)	3
document.embeds	<embed>요소를 모두 반환함	3
document.implementation	HTML DOM 구현(implementation)을 반환함	3
document.inputEncoding	HTML 문서의 문자 인코딩(character set)형식을 반환함	3
document.lastModified	HTML 문서의 마지막 갱신 날짜 및 시간을 반환함	3
document.readyState	HTML 문서의 로딩 상태(loading status)를 반환함	3
document.scripts	<script>요소를 모두 반환함	3
document.strictErrorChecking	오류의 강제 검사 여부를 반환함	3