모던 자바스크립트 39. DOM(1)

WHAT I LEARNED/JavsScript

모던 자바스크립트 39. DOM(1)

보니bonnie 2024. 7. 30. 11:19

728x90

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

1. 노드

1. HTML 요소와 노드 객체

HTML 요소는 HTML 문서를 구성하는 개별적인 요소를 의미한다. 이 HTML 요소는 렌더링 엔진에 의해 파싱되어 DOM을 구성하는 요소 노드 객체로 변환된다.
HTML 요소의 어트리뷰트 → 어트리뷰트 노드 HTML 요소의 텍스트 콘텐츠 → 텍스트 노드
HTML 문서는 요소들의 집합으로 이루어지며, HTML 요소는 중첩 관계를 갖는다. 중첩 관계라 함은 HTML의 콘텐츠 영역(시작 태그와 종료 태그 사이)에 텍스트 뿐만 아니라 다른 HTML 요소도 포함될 수 있음을 의미한다.
이때 HTML 요소 간에는 중첩 관계에 의해 계층적인 부모-자식 관계가 형성된다. 이러한 부모-자식 관계를 반영하여 HTML 요소를 객체화한 모든 노드 객체들을 트리 자료 구조로 구성한다.

1) 트리 자료구조

하나의 최상위 노드에서 시작하며, 부모 노드와 자식 노드로 구성되어 노드 간의 계층적 구조를 표현하는 비선형 자료구조이다.
최상위 노드는 부모 노드가 없으며 루트 노드(Root Node)라고 한다. 이러한 루트 노드는 0개 이상의 자식 노드를 갖는다.
자식 노드가 없는 노드는 리프 노드(Leaf Node)라고 한다.
노드 객체들로 구성된 트리 자료구조를 DOM이라 한다. 노드 객체의 트리로 구조화 되어 있기 때문에 DOM 트리라고 부르기도 한다.

2. 노드 객체의 타입

DOM은 노드 객체의 계층적인 구조로 구성된다.
노드 객체는 문서 노드, 요소 노드, 어트리뷰트 노드, 텍스트 노드 등 12개의 종류가 있고 상속 구조를 갖는다.

1. 문서 노드

문서 노드는 DOM 트리 최상위에 존재하는 루트 노드로서 document 객체를 가리킨다.
document 객체는 브라우저가 렌더링한 HTML 문서 전체를 가리키는 객체로서 전역 객체 window의 document 프로퍼티에 바인딩 되어 있다. 따라서 문서 노드는 window.document 또는 document로 참조할 수 있다.
HTML 문서당 document 객체는 유일하다.
문서 노드(=document 객체)는 DOM 트리의 루트 노드이므로 DOM 트리의 요소, 어트리뷰트, 텍스트 노드에 접근하려면 문서 노드를 통해야 한다.

2. 요소 노드

요소 노드는 HTML 요소를 가리키는 객체다.
요소 노드는 HTML 요소 간의 중첩에 의해 부자 관계를 가지며 이 부자 관계를 통해 정보를 구조화한다. 따라서 요소 노드는 문서의 구조를 표현한다고 할 수 있다.

3. 어트리뷰트 노드

어트리뷰트 노드는 HTML 요소의 어트리뷰트를 가리키는 객체다.
어트리뷰트 노드는 어트리뷰트가 지정된 HTML 요소의 요소 노드와 연결되어 있다.
어트리뷰트 노드는 요소 노드에만 연결되어 있다. 즉, 부모 노드가 없으므로 요소 노드의 형제 노드는 아니다.
따라서 어트리뷰트 노드에 접근하여 어트리뷰트를 참조하거나 변경하려면 먼저 요소 노드에 접근해야 한다.

4. 텍스트 노드

텍스트 노드는 HTML 요소의 텍스트를 가리키는 객체다.
텍스트 노드는 문서의 정보를 표현한다고 할 수 있다.
텍스트 노드는 요소의 자식 노드이다.
텍스트 노드는 리프 노드이다. 즉, DOM 트리의 최종단이다.
텍스트 노드에 접근하려면 부모 노드인 요소 노드에 먼저 접근해야 한다.

3. 노드 객체의 상속 구조

DOM을 구성하는 노드 객체는 자신의 구조와 정보를 제어할 수 있는 DOM API를 사용할 수 있다.
DOM API를 통해 노드 객체는 자신의 부모, 형제, 자식을 탐색할 수 있으며 자신의 어트리뷰트와 텍스트를 조작할 수도 있다.

노드 객체도 자바스크립트 객체이므로 프로토타입에 의한 상속 구조를 갖는다.
모든 노드 객체는 Object, EventTarget(이벤트 관련), Node(트리 탐색 기능, 노드 정보 제공 기능 등) 인터페이스를 공통적으로 상속받는다. 그리고 노드 객체의 종류에 따라 별도의 인터페이스를 상속받는다.

2. 요소 노드 취득

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

const $elem = document.getElementById('id');

Document.prototype.getElementById 메서드는 인수로 전달한 id 어트리뷰트값을 갖는 하나의 요소 노드를 탐색하여 반환한다.
반드시 문서 노드인 document를 통해 호출해야한다.
id 값은 HTML 문서 내에서 유일한 값이어야한다. 만약 중복된 id가 여러 개 존재하더라 어떠한 에러는 발생하지 않는다.
이러한 경우 getElementById 메서드는 인수로 전달된 id 값을 갖는 첫 번째 요소 노드만 반환한다.
id 값을 갖는 HTML 요소가 존재하지 않는 경우 null을 반환한다.

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

Document.prototype/Element.prototype.getElementsByTagName 메서드는 인수로 전달한 태그 이름을 갖는 모든 요소 노드들을 탐색하여 반환한다.
여러 개의 요소 노드 객체를 갖는 DOM 컬렉션 객체인 HTMLCollection 객체를 반환한다.
HTML 문서의 모든 요소 노드를 취득하려면 인수로 *를 전달한다.
Document.prototype.getElementsByTagName 메서드는 DOM의 루트 노드인 문서 노드, 즉 document를 통해 호출하며 DOM 전체에서 요소 노드를 탐색하여 반환한다.
Element.prototype.getElementsByTagName 메서드는 특정 요소 노드를 통해 호출하며, 특정 요소 노드의 자식 노드 중에서 요소 노드를 탐색하여 반환한다.

<!DOCTYPE html>
<html>
  <body>
    <ul>
      <li id="apple">Apple</li>
      <li id="banana">Banana</li>
      <li id="orange">Orange</li>
    </ul>
    <script>
      // HTMLCollection 객체는 유사 배열 객체이면서 이터러블이다.
      const $elem = document.getElementsByTagName('li');

      // HTMLCollection 객체를 배열로 변환하여 순회하면서 color 프로퍼티 값을 변경한다.
      [...$elem].forEach(elem => {
        elem.style.color = 'red';
      });
    </script>
  </body>
</html>

인수로 전달된 태그 이름을 갖는 요소가 존재하지 않는 경우 빈 HTMLCollection 객체를 반환한다.

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

Document.prototype/Element.prototype.getElementsByClassName 메서드는 인수로 전달한 class 어트리뷰트 값을 갖는 모든 요소 노드들을 탐색하여 반환한다.
여러 개의 요소 노드 객체를 갖는 DOM 컬렉션 객체인 HTMLCollection 객체를 반환한다.

const $elems = document.getElementsByClassName('fruit');

Document.prototype.getElementsByClassName 메서드는 DOM의 루트 노드인 문서 노드(=document 객체)를 통해 호출하며 DOM 전체에서 요소 노드를 탐색하여 반환한다.
Element.prototype.getElementsByClassName 메서드는 특정 요소 노드를 통해 호출하며, 특정 요소 노드의 자식 노드 중에서 요소 노드를 탐색하여 반환한다.
인수로 전달된 태그 이름을 갖는 요소가 존재하지 않는 경우 빈 HTMLCollection 객체를 반환한다.

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

Document.prototype/Element.prototype.querySelector 메서드는 인수로 전달한 CSS 선택자를 만족시키는 하나의 요소 노드를 참색하여 반환한다.
- 만족시키는 요소 노드가 여러 개인 경우 첫 번째 요소 노드만 반환한다.
- 만족시키는 요소 노드가 존재하지 않는 경우 null을 반환한다.
- 문법에 맞지 않는 경우 DOMException 에러가 발생한다.

const $elem = document.querySelector('.banana');

Document.prototype/Element.prototype.querySelectorAll 메서드는 인수로 전달한 CSS 선택자를 만족 시키는 모든 요소 노드를 탐색하여 반환한다.
- 여러 개의 요소 노드 객체를 갖는 DOM 컬렉션 객체인 NodeList 객체를 반환한다.
- 만족 시키는 요소가 존재하지 않는 경우 빈 NodeList 객체를 반환한다.
- 문법에 맞지 않는 경우 DOMException 에러가 발생한다.

const $elems = document.querySelectorAll('ul > li');

id 어트리뷰트가 있는 요소 노드를 취득하는 경우에는 getElementById 메서드를 사용하고,
그 외의 경우에는 querySelector, querySelectorAll 메서드를 사용하는 것을 권장한다.

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

Element.prototype.matches 메서드는 인수로 전달한 CSS 선택자를 통해 특정 요소 노드를 취득할 수 있는지 확인한다.
이벤트 위임을 사용할 때 유용하다

<!DOCTYPE html>
<html>
  <body>
    <ul id="fruits">
      <li class="apple">Apple</li>
      <li class="banana">Banana</li>
      <li class="orange">Orange</li>
    </ul>
    <script>
      const $apple = document.querySelector('.apple');

      // $apple 노드는 #fruits > li.apple 로 취득할 수 있다.
      console.log($apple.matches('#fruits > li.apple')); // true

      // $apple 노드는 #fruits > li.banana 로 취득할 수 없다.
      console.log($apple.matches('#fruits > li.banana')); // false
    </script>
  </body>
</html>

6. HTMLCollection과 NodeList

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

1) HTMLCollection

HTMLCollection 객체는 getElementsByTagName, getElementByClassName 메서드가 반환하는, 노드 객체의 상태 변화가 실시간으로 업데이트 되는 DOM 컬렉션 객체다.

2) NodeList

querySelectorAll이 반환하는 정적 리스트(실시간 반영 X)

따라서 노드 객체의 상태 변경과 상관 없이 안전하게 DOM 컬렉션을 사용하려면 HTMLCollection이나 NodeList 객체를 배열로 변환하여 사용하는 것을 권장한다.

3. 요소 노드 취득

DOM 트리 상의 노드를 탐색할 수 있도록 Node, Element 인터페이스는 트리 탐색 프로퍼티를 제공한다.
- Node.prototype이 제공: parentNode, previousSibling, firstChild, childNodes 프로퍼티
- Element.prototype이 제공: previousElementSibling, nextElementSibling, children 프로퍼티
노드 탐색 프로퍼티는 모두 접근자 프로퍼티이다. 단, getter만 존재하는 읽기 전용 접근자 프로퍼티이다.

1. 공백 텍스트 노드

HTML 요소 사이의 스페이스, 탭, 줄바꿈 등의 공백 문자는 텍스트 노드를 생성하며 이를 공백 텍스트 노드라 한다.

2. 자식 노드 탐색

3. 자식 노드 존재 확인

자식 노드가 존재하는지 확인하려면 Node.prototype.hasChildNodes 메서드를 사용한다.
childNodes 프로퍼티와 마찬가지로 텍스트 노드를 포함하여 자식 노드의 존재를 확인한다.
자식 노드 중에 텍스트 노드가 아닌 요소 노드가 존재하는 지 확인 하려면 children.length 또는 Element 인터페이스의 childElementCount 프로퍼티를 사용한다.

<!DOCTYPE html>
<html>
  <body>
    <ul id="fruits">
    </ul>
    <script>
      // 노드 탐색의 기점이 되는 #fruits 요소 노드를 취득한다.
      const $fruits = document.getElementById('fruits');

      // #fruits 요소에 자식 노드가 존재하는지 확인한다.
      // hasChildNodes 메서드는 텍스트 노드를 포함하여 자식 노드의 존재 확인한다.
      console.log($fruits.hasChildNodes()); // true

      // 자식 노드 중에 텍스트 노드가 아닌 요소 노드가 존재하는지 확인한다.
      console.log(!!$fruits.children.length); // 0 -> false
      console.log(!!$fruits.childElementCount); // 0 -> false
    </script>
  </body>
</html>

4. 요소 노드의 텍스트 노드 탐색

요소 노드의 텍스트 노드는 자식 노드이므로 firstChild 프로퍼티로 접근할 수 있다.
firstChild 프로퍼티가 반환한 노드는 텍스트 노드이거나 요소 노드이다.

<!DOCTYPE html>
<html>
  <body>
    <div id="foo">Hello</div>
    <script>
      // 요소 노드의 텍스트 노드는 firstChild 프로퍼티로 접근할 수 있다.
      console.log(document.getElementById('foo').firstChild); // #text
    </script>
  </body>
</html>

5. 부모 노드 탐색

부모 노드를 탐색하려면 Node.prototype.parentNode 프로퍼티를 사용한다.
텍스트 노드는 DOM 트리의 최종단 노드인 리프 노드이므로 부모 노드가 텍스트 노드인 경우는 없다.
(= 텍스트 노드가 반환 될 일 없다!)

<!DOCTYPE html>
<html>
  <body>
    <ul id="fruits">
      <li class="apple">Apple</li>
      <li class="banana">Banana</li>
      <li class="orange">Orange</li>
    </ul>
    <script>
      // 노드 탐색의 기점이 되는 .banana 요소 노드를 취득한다.
      const $banana = document.querySelector('.banana');

      // .banana 요소 노드의 부모 노드를 탐색한다.
      console.log($banana.parentNode); // ul#fruits
    </script>
  </body>
</html>

6. 형제 노드 탐색

부모 노드가 같은 형제 노드를 참색하려면 다음과 같은 노드 탐색 프로퍼티를 사용한다.
단, 어트리뷰트 노드는 요소 노드와 연결되어있지만 형제 노드가 아니기 때문에 반환되지 않는다.
즉, 아래 프로퍼티는 텍스트 노드 또는 요소 노드만 반환된다.

4. 노드 정보 취득

5. 요소 노드의 텍스트 조작

1. nodeValue

Node.prototype.nodeValue 프로퍼티는 setter와 getter 모두 존재하는 접근자 프로퍼티다. 따라서 참조와 할당 모두 가능하다.
노드 객체의 nodeValue 프로퍼티를 참조하면 노드 객체의 값을 반환한다.
노드 객체의 값이란 텍스트 노드의 텍스트다.
따라서 텍스트 노드가 아닌 문서 노드나 요소 노드의 nodeValue 프로퍼티를 참조하면 null을 반환한다.

<!DOCTYPE html>
<html>
  <body>
    <div id="foo">Hello</div>
  </body>
    <script>
      // 문서 노드의 nodeValue 프로퍼티를 참조한다.
      console.log(document.nodeValue); // null

      // 요소 노드의 nodeValue 프로퍼티를 참조한다.
      const $foo = document.getElementById('foo');
      console.log($foo.nodeValue); // null

      // 텍스트 노드의 nodeValue 프로퍼티를 참조한다.
      const $textNode = $foo.firstChild;
      console.log($textNode.nodeValue); // Hello
    </script>
</html>

텍스트 노드의 nodeValue 프로퍼티에 값을 할당하면 텍스트 노드의 값, 즉 텍스트를 변경할 수 있다. 따라서 요소 노드의 텍스트를 변경하려면 다음과 같은 순서이 처리가 필요하다.
- 텍스트를 변경할 요소 노드를 취득한 다음, 취득한 요소 노드의 텍스트 노드를 탐색한다.
  텍스트 노드는 요소 노드의 자식 노드이므로 firstChild 프로퍼티를 사용하여 탐색한다.
- 탐색한 텍스트 노드의 nodeValue 프로퍼티를 사용하여 텍스트 노드의 값을 변경한다.

<!DOCTYPE html>
<html>
  <body>
    <div id="foo">Hello</div>
  </body>
    <script>
      // 1. #foo 요소 노드의 자식 노드인 텍스트 노드를 취득한다.
      const $textNode = document.getElementById('foo').firstChild;

      // 2. nodeValue 프로퍼티를 사용하여 텍스트 노드의 값을 변경한다.
      $textNode.nodeValue = 'World';

      console.log($textNode.nodeValue); // World
    </script>
</html>

2. textContent

Node.prototype.textContent 프로퍼티는 setter와 getter 모두 존재하는 접근자 프로퍼티이다.
요소 노드의 텍스트와 모든 자식 노드의 텍스트를 모두 취득하거나 변경한다.
요소 노드의 textContent 프로퍼티를 참조하면 요소 노드의 콘텐츠 영역 내의 텍스트를 모두 반환한다.
이때 HTML 마크업은 무시된다.

<!DOCTYPE html>
<html>
	<body>
  		<div id="foo">Hello <span>world!</span></div>
	</body>
	<script>
  		console.log(document.getElementById('foo').textContent); // Hello world!
	</script>
</html>

728x90

저작자표시 비영리 동일조건

'WHAT I LEARNED > JavsScript' 카테고리의 다른 글

모던 자바스크립트 41. 타이머 (0)	2024.08.07
모던 자바스크립트 40. 이벤트(1) (0)	2024.08.05
모던 자바스크립트 39. DOM (0)	2024.07.21
모던 자바스크립트 37. Set과 Map (0)	2024.07.21
모던 자바스크립트 36. 디스트럭처링 할당 (0)	2024.07.21

우당탕탕 개발기록

모던 자바스크립트 39. DOM(1)

1. 노드

1. HTML 요소와 노드 객체

2. 노드 객체의 타입

3. 노드 객체의 상속 구조

2. 요소 노드 취득

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

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

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

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

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

6. HTMLCollection과 NodeList

3. 요소 노드 취득

1. 공백 텍스트 노드

2. 자식 노드 탐색

3. 자식 노드 존재 확인

4. 요소 노드의 텍스트 노드 탐색

5. 부모 노드 탐색

6. 형제 노드 탐색

4. 노드 정보 취득

5. 요소 노드의 텍스트 조작

1. nodeValue

2. textContent

'WHAT I LEARNED > JavsScript' 카테고리의 다른 글

티스토리툴바

모던 자바스크립트 39. DOM(1)

1. 노드

1. HTML 요소와 노드 객체

2. 노드 객체의 타입

3. 노드 객체의 상속 구조

2. 요소 노드 취득

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

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

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

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

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

6. HTMLCollection과 NodeList

3. 요소 노드 취득

1. 공백 텍스트 노드

2. 자식 노드 탐색

3. 자식 노드 존재 확인

4. 요소 노드의 텍스트 노드 탐색

5. 부모 노드 탐색

6. 형제 노드 탐색

4. 노드 정보 취득

5. 요소 노드의 텍스트 조작

1. nodeValue

2. textContent

'WHAT I LEARNED > JavsScript' 카테고리의 다른 글

관련글

티스토리툴바