DOM

DOM 이란?

문서 객체 모델 (Document Object Model)

문서 객체 모델 : 객체 지향 모델로써 구조화된 문서를 표현하는 방식

HTML 문서에 대한 인터페이스

DOM은 XML이나 HTML 문서의 프로그래밍 인터페이스
Dom은 문서의 구조화된 표현 (structrued represeintation)을 제공하여 프로그래밍 언어가 문서 구조, 스타일, 내용 등을 변경할 수 있도록 한다.

Dom의 종류

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

HTML DOM

HTML문서를 조작하고 접근하는 표준화된 방법
모든 html 요소는 HTML DOM을 통해 접근 가능

XML DOM

xml문서에 접근하여 그 문서를 다루는 표준화된 방법을 정의
모든 xml 요소는 XML DOM을 통해 접근 가능

Document 객체

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

Document 메소드

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

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

HTML 요소의 선택

새로운 HTML 요소를 선택하기 위해 제공되는 메소드
document.getElementById() : 해당 아이디의 요소를 선택
document.getElementsByClassName() : 해당 클래스에 속한 요소를 선택
document.getElementsByName() : 해당 name 속성값을 가지는 요소를 선택
document.querySelectorAll() : 해당 선택자로 선택되는 요소를 모두 선택
document.querySelector() : 해당 선택자로 선택되는 요소를 1개 선택

HTML 요소의 생성

HTML 요소를 생성하기 위해 제공되는 메소드
document.createElement() : 지정된 HTMl 요소를 생성
document.write() : HTML 출력 스트림을 통해 텍스트를 출력

HTML 이벤트 핸들러 추가

HTML 요소에 이벤트 핸들러를 추가하기 위해 제공되는 속성
요소.onclick = function(){} : 마우스 클릭 이벤트와 연결될 이벤트 핸들러