[JS Deep Dive] 39장 - DOM

1. DOM

---

DOM 

브라우저가 이해할 수 있는 자료구조인 노드 객체들로 구성된 트리 자료구조

---

• HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리자료구조
• 브라우저 렌더링 엔진은 HTML 문서를 파싱하여 브라우저가 이해할 수 있는 자료구조인 DOM 생성함

 

2. 요소

• HTML 요소는 HTML 문서를 구성하는 개별적인 요소를 의미한다.
• HTML 요소는 렌더링 엔진에 의해 파싱되어 DOM을 구성하는 요소 노드 객체로 변환된다.
• 이때 HTHML 요소의 어트리뷰트는 어트리뷰트 노드로, HTML 요소의 텍스트 콘텐츠는 텍스트 노드로 변환된다.
• HTML 문서는 HTML 요소들의 집합으로 이루어지며 HTML 요소는 중첩관계를 가지기 때문에 시작 태그와 종료태그(콘텐츠 영역) 에는 텍스트, HTML 요소 다 포함할 수 있다. 그리고 이 중첩 관계에 의해 계층적인 부자 관계가 형성된다.

 

트리 자료구조는 노드들의 계층 구조를 이루어진다. 

하나의 최상위 노드에서 시작하여 부모와 자식노드로 구성되어 계층적 구조로 표현하는 *비선형 자료구조

 

*비선형 자료구조 : 하나의 자료 뒤에 여러개의 자료가 존재할 수 있는 자료구조 
비선형 자료구조에는 트리, 그래프가 있다. 
(<-> 선형 자료구조: 하나의 자료 뒤에 하나의 자료만 존재하는 자료구조/ 배열, 스택, 큐,링크드 리스트, 해시 테이블...)

 

루트(Root)노트 - 최상위 노드/ 0개 이상의 자식 노드를 가짐
Leaf Node - 자식 노드가 없는 노드 

 

3. 노드 객체의 타입

3-1. 문서 노드

• DOM 트리의 최상위에 존재하는 루트 노드이자 DOM 트리의 노드들에 접근하기 위한 진입점 역할
• 즉 다른 요소, 어트리뷰트, 텍스트 노드에 접근하려면 문서 노드를 통해야함
• document 객체 가리킴
• 브라우저가 렌더링한 HTML 문서 전체를 가리키는 객체로서 전역객체 window 의 document 프로퍼티에 바인딩
• window.document/ document 로 참조
• 모든 코드가 script 태그로 분리되어 있어도 하나의 전역 객체 window 를 공유함

3-2. 요소 노드

• HTML 요소를 가리킴
• 문서의 구조 표현
• HTML 요소 간의 중첩에 의해 부자 관계를 가지고 이 부자관계를 통해 정보 구조화

3-3. 어트리뷰트 노드

• HTML 요소의 어트리뷰트 가리킴
• 요소 노드는 부모 노드와 연결되어 있지만 어트리뷰트 노드는 요소 노드에만 연결 (부모 노드 x) -> 먼저 요소 노드에 접근해야 어트리뷰트 노드를 참조하거나 변경할 수 있다. 

3-4. 텍스트 노드

• HTML 요소의 텍스트
• 문서의 정보 표현
• 요소 노드의 자식 노드이자 자식노드를 가질 수 없는 리프 노드
• DOM 트리의 최종단 -> 먼저 요소 노드에 접근해야 텍스트 노드를 참조하거나 변경할 수 있다. 

 

4. 노드 객체의 상속 구조

-> DOM을 구성하는 노드 객체는 자신의 구조와 정보를 제어할 수 있는 DOM API를 사용할 수 있다.

• 모든 노드 객체는 Object, EventTarget, Node 인터페이스를 상속받는다.
• 추가적으로 문서 노드는 Document, HTMLDocument 인터페이스를 상속받고
  어트리뷰트 노드는 Attr, 텍스트 노드는 CharacterData 인터페이스를 각각 상속받는다.
• 노드 객체는 공통된 기능일수록 프로토타입 체인의 상위, 개별적인 고유기능일수록 프로토타입 체인의 하위에 프로토타입 체인을 구축하여 노드 객체에 필요한 기능, 즉 프로퍼티와 메서드를 제공하는 상속 구조 가짐

5. 요소 노드 취득

즉 h1 요소 노드를 취득하고 싶으면

취득한 요소 노드의 자식 노드인 텍스트 노드르르 변경하면 해당 h1 요소의 텍스트가 변경된다. 

 

5-1. id 를 이용한 요소 노드 취득

getElementById 메서드는 Document.prototype 프로퍼티라서 반드시 문서 노드인 document 를 통해 호출해야함

만약 중복된 id 값을 갖는 요소가 여러 개 존재한다면 

getElementById 메서드는 인구로 전달된 id 값을 갖는 첫번째 요소 노드만 반환한다. 만약 요소가 존재하지 않으면 null 반환함

 

 

즉 getElementById 메서드는 언제나 단 하나의 요소 노드만 반환한다는 것!

• HTML 요소에 id 어트리뷰트를 부여하면 Id 값과 동일한 이름의 전역 변수가 암묵적으로 선언되고 해당 노드객체가 할당되는 부수효과가 있다. 
• 단! id 값과 동일한 이름의 전역 변수가 이미 선언되어 있으면 이 전역 변수에 노드 객체가 재할당되지 않는다. 

5-2. 태그 이름을 이용한 요소 노드 취득

• 여러 개의 요소 노드 객체를 가지는 DOM 컬렉션 객체인 HTMLCollection 객체 반환
• 함수는 하나의 값만 반환할 수 있기 때문에 여러 개의 값을 반환하려면 배열이나 객체같은 자료구조에 담아 반환해야한다. 
• 탐색된 요소 노드들은 HTMLCollection 객체에 담겨 반환되기 때문에HTMLCollection 은  유일한 유사 배열객체이면서 이터러블이다. 
• * 은 HTML 문서의 모든 요소 노드를 취득
• 인수로 전달된 태그 이름을 가지는 요소가 존재하지 않으면 빈 HTMLCollection 객체 반환 

5-3. class 를 이용한 요소 노드 취득

• Document.prototype.getElementsByClassName 메서드는 DOM의 루트 노드인 문서 노드, 즉 document를 통해 호출하며 DOM 전체에서 요소 노드를 탐색하여 반환한다.
• Element.prototype.getElementsByClassName 메서드는 특정 요소 노드를 통해 호출하며, 특정 요소 노드의 자손 노드 중에서 요소 노드를 탐색하여 반환한다.

5-4. CSS 선택자를 이용한 요소 노드 취득

• CSS 선택자는 스타일을 적용하고자 하는 HTML 요소를 특정할 때 사용하는 문법
• Document.prototype/Element.prototype.querySelector 메서드는 인수로 전달한 CSS 선택자를 만족시키는 하나의 요소 노드를 참색하여 반환한다.
• 전체 선택자 : 모든 요소를 선택
• 태그 선택자 : 모든 p 태그 요소를 모두 선택
• id 선택자 : id 값의 요소 선택
• 후손 선택자 : div 요소의 후손 요소 중 p 요소를 모두 선택
• 자식 선택자 : div 요소의 자식 요소 중 p 요소를 모두 선택 

5-5. 특정 요소 노드를 취득할 수 있는지 확인

인수로 전달한 CSS 선택자를 통해 특정 요소 노드를 취득할 수 있는지 확인

Element.prototype.matches 메서드는 이벤트 위임을 사용할 때 유용

 

 

6. HTMLCollection 과 NodeList

• HTMLCollection과 NodeList의 중요한 특징은 노드 객체의 상태 변화를 실시간으로 반영하는 살아있는(live) 객체
• HTMLCollection은 언제가 live 객체로 동작한다.
• 단 NodeList는 대부분의 경우 노드 객체의 상태 변화를 실시간으로 반영하지 않고 과거의 정적 상태를 유지하는 non-live 객체로 동작하지만 경우에 따라 live 객체로 동작할 때가 있음.

HTMLCollection : getElementsByTagName, getElementByClassName 메서드가 반환하는 HTMLCollection 객체는 노드 객체의 상태 변화를 실시간으로 반영하는 살아 있는 DOM 컬렉션 객체

 

NodeList :  HTMLCollection 객체의 부작용을 해결하기 위해 querySelectorAll 메서드를 사용하는 방법도 있다. 이때 NodeList 객체는 실시간으로 노드 객체의 상태 변경을 반영하지 않는(non-live) 객체다.

 

-> 노드 객체의 상태 변경과 상관없이 안전하게 DOM 컬렉션을 사용하려면 HTMLCollection 이나 NodeList 배열로 반환하여 사용하는 것을 권장함