DOM이란?

문서 객체 모델 DOM(Document Object Model)이란 HTML, XML 문서의 프로그래밍 인터페이스입니다. DOM은 문서의 구조화된 표현을 제공하며 프로그래밍 언어가 DOM에 접근하여 문서 구조, 스타일, 내용을 변경할 수 있도록 합니다.

DOM의 사용

출처: TCP School

JavaScript는 DOM을 이용하여 HTML, CSS, 이벤트 동작 등을 추가 혹은 변경할 수 있습니다.

Document 객체

Document는 웹페이지를 뜻하며 HTML 요소에 접근할 때 반드시 Document로 시작해야 합니다.

Document 메소드

HTML 요소 선택

• document.getElementsByTagName(태그이름) : 해당 태그 요소를 모두 선택

• document.getElementById(아이디) : 해당 아이디 요소 선택

• document.getElementsByClassName(클래스이름) : 해당 클래스에 속한 요소를 모두 선택

• document.getElementsByName(name속성값) : 해당 name 속성값을 가지는 요소를 모두 선택

• document.querySelectorAll(선택자) : 해당 선택자로 선택되는 요소를 모두 선택
  
  

HTML 요소 생성

• document.createElement(HTML요소) : 지정된 HTML 요소 생성

• document.write(텍스트) : HTML 출력 스트림을 통해 텍스트를 출력
  
  

HTML 이벤트 핸들러 추가

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

Document 속성:
https://developer.mozilla.org/ko/docs/Web/API/Document