⭐️ DOM(문서 객체 모델)이란?
: Document(HTML 파일)를 Javascript가 알아먹을 수 있는 Object 형태로 Modeling 한 것
.
= 스크립트 언어로 HTML 요소를 제어할 수 있도록 웹문서를 객체화한 것
= HTML 코드를 해석해서 요소들을 트리 형태로 구조화해 표현하는 형식이자 문서, 데이터!
- 역할 :
자바스크립트를 사용해서 웹 화면의 콘텐츠를 추가, 수정, 삭제하거나 이벤트를 처리할 수 있도록 프로그래밍 인터페이스를 제공(=동적으로 조작할 수 있음)
돔트리를 참고하자.
각각의 요소를 '노드'라고 하고 돔트리는 노드들의 계층 구조로 이루어져 있다.
HTML 문서는 하나의 최상위 노드(root 노드)와
그 아래로 뻗어나온 자식 노드들로 구성되어 있다.
⭐️ DOM 이용하는 방법
각각의 요소 즉 노드에 접근해 웹문서를 제어할 수 있다.
1) 메소드를 통해 제어할 대상(element)에 접근한다.
2) 접근한 element가 갖고 있는 메소드를 실행해 제어한다.
DOM트리의 취상위 node인 document객체로 원하는 html 요소에 접근할 수 있다.
⭐️ 모든 DOM의 node들은 ‘속성’과 ‘메서드'를 가지고 있음.
DOM의 Node 객체에서 속성과 메서드를 구분하는 가장 쉬운 방법은
Node 객체의 속성은 값을 가지고 있는 반면, 메서드는 동작을 수행한다는 것.
즉, Node 객체의 속성은 해당 객체의 특성을 나타내는 값을 가져오거나 설정하는 데 사용되며,
메서드는 해당 객체가 수행하는 작업을 나타내는 함수
Document 객체 : 웹 페이지 그 자체
웹 페이지에 존재하는 HTML 요소에 접근하고자 할 때는 반드시 Document 객체부터 시작
- Document 메소드(:HTML 요소와 관련된 작업 수행)
-
HTML 요소 선택:
document.getElementsByTagName
document.getElementById
document.getElementsByClassName
document.getElementsByName
document.querySelectorAll(CSS 선택자) -
HTML 요소 생성:
document.createElement(HTML요소)
document.write(텍스트) -
HTML 이벤트 핸들러 추가:
예시)
document.getElementById(아이디).onclick = function(){실행할 코드} -
HTML 객체 선택:
HTML DOM에서 제공하는 객체 집합(object collection) 이용
-
📍 결론 :
자바스크립트가 DOM의 인터페이스를 이용하여 DOM에 접근해
노드를 동적으로 생성하거나 삭제, 혹은 변경 할 수 있다.
태그 내부에 정적으로 입력된 태그가 하나도 존재하지 않음에도
브라우저는 script 태그 내의 코드를 차례대로 읽어 내려가 해석하며
노드를 동적으로 생성하여 업데이트하게 된다. 그렇게 인터랙티브한 기능을 구현할 수 있다.
