DOM이란..?
문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface 이다. DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. DOM 은 nodes와 objects로 문서를 표현한다. 이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다.
- HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API를 제공하는 트리 자료구조
- 노드 객체들로 구성된 트리 자료구조를 DOM이라 한다. 노드 객체의 트리로 구조화되어 있기 때문에 DOM을 DOM트리라고 부르기도 한다.
<div class="parent">
<div class="children"></div>
</div>
노드 타입
-
문서 노드
문서 노드는 DOM 트리의 최상위에 존재하는 루트 노드로서document객체를 가리킨다. 따라서 문서 노드는window.document또는document로 참조할 수 있다. 문서 노드, 즉document객체는 DOM 트리의 루트 노드이므로 DOM 트리의 노드들에 접근하기 위한 진입점 역할을 담당한다. -
요소 노드
요소 노드는 HTML 요소를 가리키는 객체다. 요소 노드는 HTML 요소 간의 중첩에 의해 부자 관계를 가지며, 이 부자 관계를 통해 정보를 구조화한다. 따라서 요소 노드는 문서의 구조를 표현한다고 할 수 있다. -
어트리뷰트 노드
어트리뷰트 노드는 HTML 요소의 어트리뷰트를 가리키는 객체다. 어트리뷰트 노드는 부모 노드와 연결되어 있지 않고 요소 노드에만 연결되어 있다. 따라서 어트리뷰트 노드에 접근하여 어트리뷰트를 참조하거나 변경하려면 먼저 요소 노드에 접근해야 한다. -
텍스트 노드
텍스트 노드는 HTML 요소의 텍스트를 가리키는 객체다. 요소 노드가 문서의 구조를 표현한다면 텍스트 노드는 문서의 정보를 표현한다고 할 수 있다. 텍스트 노드는 요소 노드의 자식 노드이며, DOM 트리의 최종단이다. 따라서 텍스트 노드에 접근하려면 먼저 부모 노드인 요소 노드에 접근해야 한다.
요소 노드 취득
- id를 이용한 요소 노드 취득
Document.prototype.getElementById - 태그 이름을 이용한 요소 노드 취득
Document.prototype/Element.prototype.getElementsByTagName - class를 이용한 요소 노드 취득
Document.prototype/Element.prototype.getElementsByClassName - css 선택자를 이용한 요소 노드 취득
Document.prototype/Element.prototype.querySelector - 특정 요소 노드를 취득할 수 있는지 확인
Element.prototype.matches
HTMLCollection과 NodeList
DOM API가 여러 개의 결과 값을 반환하기 위한 DOM 컬렉션 객체다. 둘다 유사 배열 객체이면서 이터러블이다. 중요한 특징은 노드 객체의 상태 변화를 실시간으로 반영하는 살아있는 객체다.
HTMLCollection
getElementsByTagName/ByClassName 메서드가 반환하는 HTMLCollection 객체는 노드의 상태 변화를 실시간으로 반영하는 살아있는 DOM 컬렉션 객체다. DOM 컬렉션을 사용하려면 HTMLCollection이나 NodeList 객체를 배열로 변환하여 사용하는 것을 권장한다.
노드 탐색
Node.prototype은 parentNode, previousSibling, firstChild, childNodes 프로퍼티를 제공한다.
Element.prototype은 previousElementSibling, nextElementSibling, children 프로퍼티를 제공한다.
노드 탐색 프로퍼티는 setter 없이 getter만 존재하여 참조만 가능한 일기 전용 접근자 프로퍼티
- 공백 텍스트 노드 (스페이스, 탭, 줄바꿈 등의 공백문자는 텍스트 노드를 생성함.
- 자식 노드 탐색 자식 노드 존재 확인
Node.prototype.hasChildNodes메서드 사용 - 요소 노드의 텍스트 노드는 요소 노드의 자식노드다. 따라서 텍스트 노드는
firstChild프러퍼티로 접근 가능. - 부모 노드 탐색하려면
Node.prototype.parentNode프로퍼티 사용. - 형제노드 탐색
Node.prototype.previousElementSibling프로퍼티 사용
노드 정보 취득
Node.prototype.nodeType,Node.prototype.nodeName
요소 노드의 텍스트 조작
nodeValue프로퍼티는 setter와 getter 모두 존재하는 접근자 프로퍼티textContent요소 노드의 콘텐츠 영역 내의 텍스트를 모두 반환한다.textContent와 유사한 동작을 하는 innerText가 있는데 innerText는 css에 순종적이다. 예를 들어 innerText 프로퍼티는 css에 의해 비표시(visibility: hidden;)로 지정된 요소 노드의 텍스트를 반환하지 않는다. 즉 css를 고려해야하므로 textContent 보다 느리다
결론 textContent를 사용하자 ! ! !
DOM 조작
DOM 조작은 새로운 노드를 생성하여 DOM에 추가학더나 기존 노드를 삭제 또는 교체하는 것을 말한다.
innerHTML은 접근자 프로퍼티로서 요소 노드의 HTML 마크업을 취득하거나 변경한다.innerHTML크로스 사이트 스크립팅 공격에 취야하다insertAdjacentHTML메서드는 기존 요소를 제거하지 않으면서 위치를 지정해 새로운 요소 삽입Document.prototype.createElement(tagName)메서드는 요소 노드를 생성하여 반환한다.Document.prototype.createTextNode(text)메서드는 텍스트 노드를 생성하여 반환한다.Node.prototype.appendChild메서드는 매개변수childNode에게 인수로 전달한 노드를appendChild메서드를 호출한 노드의 마지막 자식 노드로 추가한다. 언제나 마지막 자식 노드로 추가한다.- 지정한 위치에 노드 삽입은
Node.prototype.insertBefore(newNode, childNode)메서드는 첫 번째 인수로 전달받은 노드를 두 번째 인수로 전달받은 노드 앞에 삽입한다. Node.prototype.cloneNode([deep: true | false])메서드는 노드의 사본을 생성하여 반환한다.true를 인수로 전달하면 깊은 복사하여 모든 자손노드 포함된 사본 생성,false를 인수로 전달하거나 생략시 노드를 얕은 복사 자기 자신만의 사본을 생성한다.Node.prototype.replaceChild(newChild, oldChild)메서드는 자신의 호출한 노드의 자식 노드를 다른 노드로 교체한다.Node.prototype.removeChild(child)메서드는child매개변수에 인수로ㅓ 전달한 노드를 DOM에서 삭제한다.
어트리뷰트
- HTML 문서의 구성요소인 HTML요소는 여러 개의 어트리뷰트를 가질수 있다.
Element.prototype.getAttribute/setAttribute메서드를 사용하면attribute프로퍼티를 통하지 않고 요소 노드에서 메서드를 통해 직접 HTML 어트리뷰트값을 취득하거나 변경할 수 있다.- HTML 어트리뷰트의 역할은 HTML 요소의 초기 상태를 지정하는 것이다. 즉, HTML 어트리뷰트 값은 HTML 요소의 초기 상태를 의미하며 이는 변하지않는다.
dataset프로퍼티를 사용하면 HTML 요소에 정의한 사용자 정의 어트리뷰트와 자바스크립트 간에 데이터를 교환할 수 있다.data어트리뷰트는data-user-id,data-role과 같은data-접두사 다음에 임의의 이름을 붙여 사용한다.
스타일
인라인 스타일 조작
HTMLElement.prototype.style프로퍼티는 접근자 프로퍼티로서 요소 노드의 인라인 스타일을 취득하거나 추가 또는 변경가능하다..으로 시작하는 클래스 선택자를 사용하여 CSS class를 미리 정의한 다음, HTML 요소의 class 어트리뷰트 값을 변경하여 HTML요소의 스타일을 변경할 수도 있다.Element.prototype.className프로퍼티는 접근자 프로퍼티로서 HTML 요소의 class 어트리뷰트 값을 취득하거나 변경한다.Element.prototype.classList프로퍼티는 class 어트리뷰트의 정보를 담은 DOMTokenList 객체를 반환한다.
느낀점❓
상당한 양이여서 어떻게 정리해야할지 고민하다 그래도 중요하게 생각하거나 몰랐던거를 정리하였다. 이해하는데 있어서는 어렵지 않았다. DOM이 뭐예요 라고 물어보면 단지 HTML 문서를 객체화한것이라고 말하는정도였는데 흠..이제는 브라우저 엔진이 HTML을 파싱하여 브라우저가 이해할 수 있는 자료구조로 만들어진것이 DOM이고 이 DOM은 HTML문서의 계층적 구조와 정보를 표현할 뿐만아니라 DOM를 제어 할 수 있는 DOM API(메서드, 프로퍼티) 를 제공한다. 라고 말하도록 노력하자 ... !
