자바스크립트 HTML DOM Document

The HTML DOM document 객체는 웹 페이지에 있는 다른 모든 객체의 소유자(owner)입니다.


HTML DOM Document 객체

document 객체는 웹 페이지를 나타냅니다.

HTML 페이지의 요소에 액세스하려면, 항상 document 객체에 먼저 액세스하고 시작합니다.

다음은, HTML에 액세스하고 조작하기 위해, document 객체를 사용하는 방법입니다.


HTML 요소 찾기

Method Description
document.getElementById(id) 요소 id로 요소 찾음
document.getElementsByTagName(name) 태그 name으로 요소 찾음
document.getElementsByClassName(name) class name으로 요소 찾음

HTML 요소 변경

Method Description
element.innerHTML =  new html content 요소의 inner HTML을 변경
element.attribute = new value HTML 요소의 attribute 값을 변경
element.setAttribute(attribute, value) HTML 요소의 attribute 값을 변경
element.style.property = new style HTML 요소의 style을 변경

요소 추가 및 삭제

Method Description
document.createElement(element) HTML 요소 생성
document.removeChild(element) HTML 요소 제거
document.appendChild(element) HTML 요소 추가
document.replaceChild(element) HTML 요소 대체
document.write(text) HTML 출력 스트림(output stream)에 쓰기

이벤트(Events) 핸들러 추가

Method Description
document.getElementById(id).onclick = function(){code} onclick 이벤트에 이벤트 핸들러 코드(event handler code) 추가

HTML 객체 찾기

첫 번째 HTML DOM Level 1(1998)은 11개의 HTML 객체, 객체 모음(object collections) 및 속성을 정의했습니다. HTML5에서도 여전히 유효합니다.

나중에 HTML DOM Level 3에서 더 많은 객체, 객체 모음(collections) 및 속성이 추가되었습니다.

Property Description DOM
document.anchors a 이름 속성(name attribute)을 가진 모든 <a>요소를 반환 1
document.applets 모든 <applet> 요소를 반환 (HTML5에서 더 이상 사용되지 않음) 1
document.baseURI document의 절대 기본(absolute base) URI를 반환 3
document.body <body> 요소를 반환 1
document.cookie document’s cookie를 반환 1
document.doctype document’s doctype을 반환 3
document.documentElement <html> 요소를 반환 3
document.documentMode 브라우저가 사용하는 mode를 반환 3
document.documentURI document의 URI를 반환 3
document.domain document server의 domain name을 반환 1
document.domConfig 폐기됨. DOM configuration을 반환 3
document.embeds 모든 <embed> 요소를 반환 3
document.forms 모든 <form> 요소를 반환 1
document.head <head> 요소를 반환 3
document.images 모든 <img> 요소를 반환 1
document.implementation DOM implementation을 반환 3
document.inputEncoding document’s encoding (character set)을 반환 3
document.lastModified document가 업데이트 된 date와 time을 반환 3
document.links a href attribute을 가진 모든 <area> 및 <a> 요소를 반환 1
document.readyState document의 (loading) status를 반환 3
document.referrer referrer (the linking document)의 URI를 반환 1
document.scripts 모든 <script> 요소를 반환 3
document.strictErrorChecking error checking이 수행되는지를 반환 3
document.title <title> 요소를 반환 1
document.URL document의 전체(complete) URL를 반환 1

출처: JavaScript HTML DOM Document

댓글 남기기