JavaScript 입문 | 문서 객체 모델 | Document 객체

Document 객체

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

Document 메소드

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

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

HTML 요소의 선택

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

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

이 중에서 document.querySelectorAll() 메소드는 브라우저별로 지원 여부가 다르다. document.querySelectorAll() 메소드를 지원하는 주요 웹 브라우저의 버전은 다음과 같다.

메소드 ie chrome firefox safari opera
document.querySelectorAll() 9.0 1.0 3.5 3.2 10.0

HTML 요소의 생성

새로운 HTML 요소를 생성하기 위해 제공되는 메소드는 다음과 같다. 메소드 설명 document.createElement(HTML요소) 지정된 HTML 요소를 생성함. document.write(텍스트) HTML 출력 스트림을 통해 텍스트를 출력함.

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

HTML 이벤트 핸들러 추가

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

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

HTML 객체의 선택

HTML DOM Level 1은 2017년에 정의되어, 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.head <head>요소를 반환함. 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



최종 수정 : 2021-08-27