제이스크립트 HTML DOM 문서

HTML DOM 문서 객체는 여러분의 웹 페이지에 있는 모든 다른 객체의 소유자입니다.

HTML DOM 문서 객체

문서 객체는 여러분의 웹 페이지를 대표합니다.

HTML 페이지의 어떤 요소도 접근하고자 한다면, 항상 document 객체에서 시작합니다.

아래는 document 객체를 사용하여 HTML에 접근하고操作하는 예제입니다.

HTML 요소를 찾기

메서드 설명
document.getElementById(id) 요소 id를 통해 요소를 찾습니다
document.getElementsByTagName(이름) 태그 이름을 통해 요소를 찾습니다
document.getElementsByClassName(이름) 클래스 이름을 통해 요소를 찾습니다

HTML 요소를 변경합니다

메서드 설명
element.innerHTML = 새로운 html 내용 요소의 inner HTML을 변경합니다
element.attribute = new value HTML 요소의 속성 값을 변경합니다
element.setAttribute(attribute, value) HTML 요소의 속성 값을 변경합니다
element.style.property = new style HTML 요소의 스타일을 변경합니다

요소 추가 및 제거

메서드 설명
document.createElement(element) HTML 요소를 생성합니다
document.removeChild(element) HTML 요소를 제거합니다
document.appendChild(element) HTML 요소를 추가합니다
document.replaceChild(element) HTML 요소를 대체합니다
document.write(text) HTML 출력 스트림에 쓰기

이벤트 처리기를 추가합니다

메서드 설명
document.getElementById(id).onclick = function(){code} onclick 이벤트에 이벤트 처리기를 추가합니다

HTML 객체 찾기

최초의 HTML DOM Level 1 (1998)은 11개의 HTML 객체, 객체 집합 및 속성을 정의했습니다. 이들은 HTML5에서도 유효합니다.

HTML DOM Level 3에서는 더 많은 객체, 집합 및 속성이 추가되었습니다.

속성 설명 DOM
document.anchors name 속성을 가진 모든 <a> 요소를 반환합니다。 1
document.applets 모든 <applet> 요소를 반환합니다（HTML5에서는 권장하지 않습니다） 1
document.baseURI 문서의 절대 기준 URI를 반환합니다 3
document.body <body> 요소를 반환합니다 1
document.cookie 문서의 쿠키를 반환합니다 1
document.doctype 문서의 doctype를 반환합니다 3
document.documentElement <html> 요소를 반환합니다 3
document.documentMode 브라우저가 사용하는 모드를 반환합니다 3
document.documentURI 문서의 URI를 반환합니다 3
document.domain 문서 서버의 도메인을 반환합니다 1
document.domConfig 폐지되었습니다。DOM 설정을 반환합니다 3
document.embeds 모든 <embed> 요소를 반환합니다 3
document.forms 모든 <form> 요소를 반환 1
document.head <head> 요소를 반환 3
document.images 모든 <img> 요소를 반환 1
document.implementation DOM 구현을 반환 3
document.inputEncoding 문서의 인코딩(문자셋)을 반환 3
document.lastModified 문서가 최근 수정된 날짜와 시간을 반환 3
document.links 모든 <area> 및 <a> 요소의 href 속성을 가진 요소를 반환 1
document.readyState 문서의(로드된) 상태를 반환 3
document.referrer 참조된 URI(링크 문서)를 반환 1
document.scripts 모든 <script> 요소를 반환 3
document.strictErrorChecking 에러 검사를 강제할지 여부를 반환 3
document.title <title> 요소를 반환 1
document.URL 문서의 전체 URL을 반환 1