[JavaScript] DOM

DOM(Document Object Model)

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

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

DOM의 종류

• Core DOM → 모든 문서 타입을 위한 DOM 모델
• HTML DOM → HTML 문서를 위한 DOM 모델
  • HTML 문서를 조작하고 접근하는 표준화된 방법. 모든 HTML 요소는 HTML DOM을 통해 접근 가능.
    
• XML DOM → 문서를 위한 DOM 모델
  • XML 문서에 접근하여 그 문서를 다루는 표준회된 방법. 모든 XML 요소는 XML DOM을 통해 접근 가능.
    

Document 객체

→ Document 객체는 웹 페이지를 의미함.

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

Document 메소드

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

• HTML 요소의 선택
  • document.getElementById() → 해당 아이디의 요소를 선택
  • document.getElementsByClassName() → 해당 클래스에 속한 요소를 선택
  • document.getElementsByName() → 해당 name 속성값을 가지는 요소를 선택
  • document.querySelectorAll() → 해당 선택자로 선택되는 요소를 모두 선택
  • document.querySelector() → 해당 선택자로 선택되는 요소를 1개 선택
• HTML 요소의 생성
  • document.createElement() → 지정된 HTML 요소를 생성(HTML Object)
  • document.write() → HTML 출력 스트림을 통해 텍스트를 출력(Text)
• HTML 이벤트 핸들러 추가
  • 요소.onclick = function(){} → 마우스 클릭 이벤트와 연결될 이벤트 핸들러
  • 이 외에도 여러 이벤트 핸들러가 있음.
• HTML 객체의 선택