DOM
문서 객체 모델(Document Object Model)이란 HTML 문서에 접근하기 위한 일종의 인터페이스이다.
HTML 문서를 Javascript가 이해할 수 있도록 바꿔주는 작업 = parsing
자바스크립트를 DOM과 같이 사용한다면
자바스크립트는 !
- 새로운 HTML 요소나 속성을 추가
- 존재하는 HTML 요소나 속성을 제거
- HTML 문서의 모든 HTML 요소를 변경
- HTML 문서의 모든 HTML 속성을 변경
- HTML 문서의 모든 CSS 스타일을 변경
- HTML 문서에 새로운 HTML 이벤트를 추가
- HTML 문서의 모든 HTML 이벤트에 반응
할 수 있습니다. !
HTML의 요소나 속성을 추가하거나 제거할 수 있고, HTML 문서의 요소와 속성에 관련된 것에 대해 변경, 추가, 반응할 수 있다.
Document 객체
Document 객체에서 Document는 웹 페이지 그 자체를 의미한다.
웹 페이지에 존재하는 HTML 요소에 접근하고자 할 때는 반드시 Document 객체부터 시작해야 한다.
Ducument 메서드
HTML요소와 관련된 작업을 하는데 도움을 주는 메서드
- HTML 요소의 선택
- HTML 요소의 생성
- HTML 이벤트 핸들러 추가
- HTML 객체의 선택
1. HTML요소 선택하기
getElementsByTagName(태그종류)
document.getElementById(아이디)
document.getElementsByClassName(클래스이름)
document.getElementsByName(name속성값)
document.querySelectorAll(선택자)
2. HTML요소 생성하기
document.createElement(HTML요소)
document.write(텍스트)
3. HTML 이벤트 핸들러 추가하기
이벤트 핸들러란?
이벤트란 웹 페이지에서 일어나는 하나의 행위를 다루는 것으로서, 이를테면 링크를 클릭하거나 텍스트 영역의 밸류(value)를 바꾼다든가 하는 것들이다. 이벤트는 사용자에 의해 수행되거나 스크립트를 통해서 강제로 행해진다. 자바스크립트(JavaScript)에서 이벤트 핸들러는 스크립트가 한 이벤트에 반응하게 하는 장치이다.
document.getElementById(아이디).onclick = function(){ 실행할 코드 }
4. HTML 객체 선택하기
HTML DOM에서 제공하는 객체 집합을 사용하면 HTML객체를 손쉽게 사용할 수 있다.
DOM Level 3는 2004년 이후로 새로 정의되어 1과 같이 사용하고 있다.
DOM은 Javascript가 HTML을 통해서 더 다양한 동적인 행동을 할 수 있게끔 해주는 것 같다. 태그를 생성하고 속성을 추가하거나 변경하고 이벤트를 통해 다음 행동을 기대하게 하는 것 같다.
