웹페이지(html, xml)의 요소를 구조화시켜 쉽게 읽고 조작할 수 있도록 만드는 일종의 인터페이스.
현재 웹 브라우저에서 DOM을 조작하는 언어는 자바스크립트 뿐.
*DOM은 HTML의 JavaScript표현
html, xml은 계층적 구조를 가지고 있어서 DOM 개체 구조도 계층적이다. (일명 Nodetree형)
*Nodetree(하나의 부모 줄기가 여러개의 자식 나뭇가지, 나뭇잎들을 가질 수 있는 나무와 같은 구조).
*최상위노드(root)로 시작해 자식노드를 가져서 쭉쭉 아래로만 뻗어나가는 구조
Node의 종류
-
document node(문서 노드) : 최상위 루트 노드. document 객체. html 문서 전체 노드, 오로지 1개만 존재
-
element node(요소 노드) : HTML태그 요소(body, h2, div) 등. 속성 노드를 가질 수 있는 유일한 노드
-
attribute node(속성 노드) : 모든 HTML 태그의 요소의 '속성'.
-
text node(텍스트 노드) : 가장 마지막에 위치하는 노드. HTML문서의 모든 텍스트. leaf node라 불리기도함
DOM객체의 구성 요소
-
프로퍼티(property) : DOM 객체의 멤버 변수입니다. HTML 태그의 속성을 반영합니다.
-
메소드(method) : DOM 객체의 멤버 함수입니다. HTML 태그를 제어합니다.
-
컬렉션(collection) : 정보를 집합적으로 표현하는 일종의 배열입니다. 예를 들어 children 컬렉션은 DOM 객체의 모든 자식 DOM 객체에 대한 주소를 가집니다.
-
이벤트 리스너(event listener) : HTML 태그에 작성된 이벤트 리스너(onclick, onchange 등)들을 그대로 가집니다.
-
스타일(style) : 이 프로퍼티를 통해 HTML 태그에 적용된 CSS 스타일 시트에 접근 가능합니다.
DOM의 데이터 타입
데이터 타입은 객체이기 때문에 각각 속성과 메소드를 가지고 있음
-
document
-
element
-
nodeList(element의 배열)
-
보통 getElementsByTagName() 메서드에 의해 리턴된것과 같음.
-
nodeList의 items은 index를 통해 접근 가능 ex) list.item
-
등등..
자바스크립트 DOM 접근하는 방법
노드 생성 및 수정 / 삭제
- document.querySelector(selectors) - 선택자로 요소 선택. *주의할 점은 선택자에 해당하는 첫번째 요소만 선택한다는 것.
- document.querySelectorAll(selectors) - 선택자로 요소선택
→ nodeList를 반환. 반환객체가 nodeList이기에 for문 또는 forEach문을 사용. 아래 코드와 같이 ","를 사용하면 여러 요소를 한번에 가져올 수 있습니다.
querySelectorAll("#id,.class");
document.getElementById(id) - ID로 찾기
document.getElementByTagName(name) - 태그name으로 찾기
document.createElement(name) - 노드생성
node.append(node) - 노드붙이기
node.appendChild(node) - 노드붙이기
node.remove(node) - 노드 삭제
node.removeChild(node) - 노드 삭제
- 노드삭제 2가지 방법: remove()와 removeChild() 메소드. 노드를 이어붙이는 메소드(append(), appendChild())와는 달리 둘 다 부모 태그에 접근하지 않는다는 점.removeChild() 메소드는 부모 태그에 접근해야만 자식 태그를 제거할 수 있습니다. 그러나 이와 달리 remove() 메소드는 자식 태그에 접근해서 제거하는 메소드입니다.
element.innerHTML - 텍스트값 넣어주기
node.textContent - 텍스트값 넣어주기
element.setAttribute(name, value) - 선택한 요소(element)의 속성(attribute) 값 부여
element.getAttribute(name) - 선택한 요소(element)의 특정 속성(attribute)의 값 꺼내오기
element.addEventListener(type, listener) - 이벤트핸들러 추가
