DOM (Document Object Model)
문서객체모델. HTML, XML 문서의 프로그래밍 interface 이다.
즉, HTML을 자바스크립트가 이해할 수 있게 객체로 변환한 것이다.
DOM Tree
DOM은 위의 이미지처럼 Tree형식의 자료구조로 되어있어 DOM 트리라고도 한다.
Tree에서 위쪽의 노드를 부모노드, 아래쪽 노드를 자식노드, 최상단의 부모노드가 없는 노드를 Root(뿌리) 노드, 반대로 자식노드가 없는 노드를 Leaf(잎) 노드라고 부른다.
node: tree구조에서 모든 개체들을 node라고 부른다.
태그뿐 아니라 태그 안의 텍스트나 속성 등도 모두 node에 포함된다.
html 코드 짤 때 제일 처음 선언하는 것이 코드다.
얼핏 보면 </html/>태그 가 DOM Tree의 최상위 요소로 보일 수 있으나, 이 모든 태그와 더불어 최상단의 선언문까지 포함하는 document 객채가 그 위에 있음을 인지하자.
이름대로 document 문서 전체 를 의미한다.
또한 Document Object Model인 만큼, 태그 하나하나가 전부 객체이다.
DOM API
JavaScript가 자신에게 접근에 dom을 조작하고 수정할 수 있는 권한을 제공한다.
DOM은 웹페이지(HTML)와 스크립팅언어(JavaScript)를 서로 연결해주는 역할을 한다.
즉, DOM의 각 노드와 상호작용을 위한 인터페이스로 정적인 웹페이지(HTML)을 수정하기 위해 사용하는 것을 일컫는다.
▶ document. 으로 조작 가능한 DOM API
▶ element. 으로 조작가능한 DOM API
| querySelector() | HTML 요소(Element) 검색/찾기 (첫번째 노드 반환) |
| querySelectorAll() | HTML 요소(Element) 모두 검색/찾기 (모든 요소 반환) |
| addEventListner() | 이벤트 핸들러 등록. |
| getElementById() | 해당 Id속성을 가진 요소를 반환. |
| getElementsByClassName() | 해당 class속성을 가진 요소들을 반환. |
| tagName | 요소의 태그명을 반환. |
| textContent | 요소의 텍스트 내용을 설정하거나 반환. |
| classList | 요소의 클래스 정보 add(추가), remove(삭제), contains(조회) 등 |
DOM 노드
객체지향의 개념이지만, DOM에서 모든 객체들은 클래스(프로토타입)를 상속받는다.
