[Deep Dive] DOM과 노드

📌Language/JavaScript

[Deep Dive] DOM과 노드

hellohailie 2022. 12. 15. 15:45

✔️ 이번 정독을 통해 알게 된 것
DOM이란 무엇인가요?
innerHTML의 단점은 무엇인가요?

<답 미리보기>

🤔 DOM이란 무엇인가요?

🤓 HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리 자료구조이다.

🤔 innerHTML의 단점은 무엇인가요?

🤓 사용자로부터 입력받은 데이터를 그대로 innerHTML 프로퍼티에 할당하는 것은 XSS(크로스 사이트 스크립팅 공격)에 취약합니다. 또한 요소 노드의 기존 자식 노드를 제거하고 할당한 HTML 마크업 문자열을 파싱하여 DOM을 변경하게 됩니다.

✔️ DOM이란?

Document Object Model은 HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리 자료구조이다.

HTML 요소는 렌더링 엔진에 의해 파싱되어 DOM을 구성하는 요소 노드 객체로 변환된다.

트리 자료구조는 부모 노드와 자식 노드로 구성되어 노드 간의 계층적 구조를 표현하는 자료구조이다.

최상위 노드는 루트 노드라고 하며 부모 노드가 없다. 루트 노드는 0개 이상의 자식 노드를 갖는다. 자식 노드가 없는 노드를 리프 노드라고 한다.

노드 객체들로 구성된 트리 자료구조를 DOM이라고 한다.

✔️ 노드 타입

■ 문서 노드 :

DOM 트리의 최상위에 존재하는 루트 노드로서 document 객체를 가리킨다. HTML 문서당 document 객체는 유일하다.

요소 노드, 어트리뷰트 노드, 텍스트 노드)

■ 요소 노드 :

HTML 요소를 가리키는 객체다. 부모 노드와 연결되어 있다.

■ 어트리뷰트 노드 :

HTML 요소의 어트리뷰트를 가리키는 객체다. 요소 노드에만 연결되어 있다.

■ 텍스트 노드 :

HTML 요소의 텍스트를 가리키는 객체다. 요소 노드의 자식 노드이며, 자식 노드를 가질 수 없는 리프 노드이다.

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

프론트엔드 개발자는 HTML을 DOM과 연관지어 바라봐야한다.

✔️ 요소 노드 취득

요소 노드를 취득하는 건 HTML 요소를 조작하는 시작점이다!

id로 요소 노드 취득하기 (getElementById)

document.getElementById('apple');

id 값은 HTML 문서 내에서 유일한 값이어야 한다.

태그 이름으로 요소 노드 취득하기 (getElementsByTagName)

document.getElementsByTagName('li');

class로 요소 노드 취득하기 (getElementsByClassName)

document.getElementsByClassName('fruit');

css 선택자로 요소 노드 취득하기 (querySelector / querySelectorAll)

/* 전체 선택자: 모든 요소를 선택 */
* { ... }
/* 태그 선택자: 모든 p 태그 요소를 모두 선택 */
p { ... }
/* id 선택자: id 값이 'foo'인 요소를 모두 선택 */
#foo { ... }
/* class 선택자: class 값이 'foo'인 요소를 모두 선택 */
.foo { ... }
/* 어트리뷰트 선택자: input 요소 중에 type 어트리뷰트 값이 'text'인 요소를 모두 선택 */
input[type=text] { ... }
/* 후손 선택자: div 요소의 후손 요소 중 p 요소를 모두 선택 */
div p { ... }
/* 자식 선택자: div 요소의 자식 요소 중 p 요소를 모두 선택 */
div > p { ... }
/* 인접 형제 선택자: p 요소의 형제 요소 중에 p 요소 바로 뒤에 위치하는 ul 요소를 선택 */
p + ul { ... }
/* 일반 형제 선택자: p 요소의 형제 요소 중에 p 요소 뒤에 위치하는 ul 요소를 모두 선택 */
p ~ ul { ... }
/* 가상 클래스 선택자: hover 상태인 a 요소를 모두 선택 */
a:hover { ... }
/* 가상 요소 선택자: p 요소의 콘텐츠의 앞에 위치하는 공간을 선택
   일반적으로 content 프로퍼티와 함께 사용된다. */
p::before { ... }

✔️ 요소 노드의 텍스트 조작

nodeValue & textContent

<!DOCTYPE html>
<html>
  <body>
    <!-- 요소 노드의 콘텐츠 영역에 다른 요소 노드가 없고 텍스트만 존재 -->
    <div id="foo">Hello</div>
  </body>
  <script>
    const $foo = document.getElementById('foo');

    // 요소 노드의 콘텐츠 영역에 자식 요소 노드가 없고 텍스트만 존재한다면
    // firstChild.nodeValue와 textContent는 같은 결과를 반환한다.
    console.log($foo.textContent === $foo.firstChild.nodeValue); // true
  </script>
</html>

textContent 프로퍼티와 유사한 동작을 하는 innerText 프로퍼티!

하지만 innerText 프로퍼티는 CSS에 순종적이라 textContent 프로퍼티보다 느리고, CSS에 의해 비표시되는 요소 노드의 텍스트를 반환하지 않는다.

✔️ DOM 조작

DOM 조작은 새로운 노드를 생성하여 DOM에 추가하거나 기존 노드를 삭제 또는 교체하는 것을 말한다.

DOM 조작에 의해 리플로우와 리페인트가 발생해서 성능에 영향을 주게 된다.

innerHTML

요소 노드의 innerHTML 프로퍼티를 참조하면 요소 노드의 콘텐츠 영역 내에 포함된 모든 HTML 마크업을 문자열로 반환한다.

<!DOCTYPE html>
<html>
  <body>
    <div id="foo">Hello <span>world!</span></div>
  </body>
  <script>
    // #foo 요소의 콘텐츠 영역 내의 HTML 마크업을 문자열로 취득한다.
    console.log(document.getElementById('foo').innerHTML);
    // "Hello <span>world!</span>"
  </script>
</html>

※ textContent는 HTML 마크업을 무시하고 텍스트만 반환하지만, innerHTML은 HTML 마크업이 포함된 문자열 그대로 반환한다.

⁉️ innerHTML의 단점 ⁉️

1. 사용자로부터 입력받은 데이터를 그대로 innerHTML 프로퍼티에 할당하는 것은 XSS(크로스 사이트 스크립팅 공격)에 취약하다!!

2. 요소 노드의 innerHTML 프로퍼티에 HTML 마크업 문자열을 할당하는 경우 요소 노드의 모든 자식 노드를 제거하고 할당한 HTML 마크업 문자열을 파싱하여 DOM을 변경한다. => insertAdjacentHTML은 기존 노드 삭제 안함(XSS 공격에 취약한건 마찬가지!!)

요소 노드 생성과 추가

<!DOCTYPE html>
<html>
  <body>
    <ul id="fruits">
      <li>Apple</li>
    </ul>
  </body>
  <script>
    const $fruits = document.getElementById('fruits');

    // 1. 요소 노드 생성
    const $li = document.createElement('li');

    // 2. 텍스트 노드 생성
    const textNode = document.createTextNode('Banana');

    // 3. 텍스트 노드를 $li 요소 노드의 자식 노드로 추가
    $li.appendChild(textNode);

    // 4. $li 요소 노드를 #fruits 요소 노드의 마지막 자식 노드로 추가
    $fruits.appendChild($li);
  </script>
</html>

👉 요소를 추가할 때마다 DOM을 건드리기 때문에 성능상 좋지 않다.

<!DOCTYPE html>
<html>
  <body>
    <ul id="fruits"></ul>
  </body>
  <script>
    const $fruits = document.getElementById('fruits');

    // DocumentFragment 노드 생성
    const $fragment = document.createDocumentFragment();

    ['Apple', 'Banana', 'Orange'].forEach(text => {
      // 1. 요소 노드 생성
      const $li = document.createElement('li');

      // 2. 텍스트 노드 생성
      const textNode = document.createTextNode(text);

      // 3. 텍스트 노드를 $li 요소 노드의 자식 노드로 추가
      $li.appendChild(textNode);

      // 4. $li 요소 노드를 DocumentFragment 노드의 마지막 자식 노드로 추가
      $fragment.appendChild($li);
    });

    // 5. DocumentFragment 노드를 #fruits 요소 노드의 마지막 자식 노드로 추가
    $fruits.appendChild($fragment);
  </script>
</html>

👉 DOM을 한번만 한번만 변경해서 리플로우와 리페인트도 한번만 실행된다.

여러개의 요소 노드를 DOM에 추가하는 경우 DocumentFragment 노드를 사용하자!!

👩‍💻 모던 자바스크립트 Deep Dive를 정독하고 제가 이해한 내용을 정리한 글입니다 👩‍💻

저작자표시 비영리 변경금지

'📌Language > JavaScript' 카테고리의 다른 글

[Deep Dive] 동기와 비동기, 비동기가 처리될 수 있는 이유 (0)	2022.12.19
[Deep Dive] REST API가 무엇인가요? (0)	2022.12.16
[Deep Dive] 브라우저의 렌더링 과정 (0)	2022.12.14
[Deep Dive] 클로저와 렉시컬스코프 (0)	2022.12.12
[Deep Dive] this (0)	2022.12.07

현재글[Deep Dive] DOM과 노드

일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

Today Hailie Learned