[JavaScript] Document 객체

[JavaScript] DOM : Document Object Model (문서 객체 모델)

 

 Document 객체 

 

document 객체는 DOM객체 트리의 최상위 객체이며 웹 페이지 그 자체를 의미합니다.

브라우저는 HTML 문서를 로드하기 전에 document 객체를 먼저 만들고 웹 페이지에 존재하는 HTML요소에 접근하려고 할 때는 반드시 document객체부터 시작해야 합니다.

 

 

 document 객체의 역할 

 

- 메서드를 이용한 DOM 객체 검색, 생성, HTML 문서의 제어

- 프로퍼티로 HTML 문서의 전반적인 속성을 접근

 

(위키백과) 저자-Birger Eriksson

 

 Document 메서드 종류 

 

👉 HTML 요소 선택

👉 HTML 요소 생성

👉 HTML 이벤트 핸들러 추가

👉 HTML 객체 선택

👉 DOM 객체 삽입 • 삭제

 

 

 HTML 요소 선택 메서드 

 

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

 

 

 

 HTML 요소 생성 메서드 

 

메서드	설명
document.createElement(태그명)	새로운 태그 생성
document.createTextNode(텍스트)	새로운 텍스트 생성 (텍스트도 하나의 요소)
document.write(텍스트)	HTML 출력 스트림을 통해 텍스트를 출력
document.writeln(텍스트)	HTML 출력 스트림을 통해 텍스트를 출력 후 개행

 

 

 HTML 이벤트 핸들러 추가 메서드 

 

메서드	설명
document.getElementById(아이디).이벤트 핸들러 = function(){ 실행할 코드 }	객체와 이벤트 핸들러 연결

이벤트 핸들러에는 onClick, onDblClick, onMouseOver, onMouseUP, onKeyUp, onChange 등등등,,, 정말 다양하다.

이벤트 핸들러는 다음에,,,

 

 

 DOM 객체 삽입 • 삭제 메서드 

 

메서드	설명
부모객체.appendChild(객체)	마지막 자식객체로 삽입
부모객체.insertBefore(객체, [기준자식객체])	기준자식객체 앞으로 자식객체 삽입
부모객체.removeChild(객체)	자시객체 삭제

 

---

위 메서드들 외에도 정말 다양한 프로퍼티와 메서드는 다양합니다. 외의 것들은 아래 문서에서 확인이 가능합니다.

 

Document - Web API | MDN