DOM 소개

Frontend SELF KO

레벨 41 , 레슨 0

사용 가능

1.1 DOM의 주요 개념

문서 객체 모델 (DOM)은 웹 문서에 대한 프로그래밍 인터페이스야. 문서 구조를 노드 트리로 나타내며, 각 노드는 문서의 일부로, 요소, 텍스트, 주석 등으로 구성돼. DOM과 그 노드를 이해하는 것은 웹 기술을 다루는 데 있어 필수야.

DOM의 주요 개념들

DOM이란?

DOM (Document Object Model)은 HTML 문서의 내용을 설명하는 계층 구조야. 애플리케이션과 스크립트가 문서 내용에 동적으로 접근하고 구조, 스타일, 내용을 변경할 수 있게 해줘.

노드와 요소

DOM 맥락에서 문서의 모든 부분은 노드 (node)로 간주돼. 노드는 몇 가지 유형이 있어:

요소 노드: HTML 태그를 나타냄.
텍스트 노드: 요소 노드에 포함된 텍스트를 나타냄.
주석 노드: HTML 주석을 나타냄.
문서 노드: 전체 문서를 나타냄.

노드 트리

DOM은 트리 같은 구조를 가지며 각 노드는 자식 노드들을 가질 수 있어. 루트 노드는 전체 HTML 문서를 나타내는 document 객체야.

DOM 구조 예시:

HTML

    
      <!DOCTYPE html>
      <html>
        <head>
          <title>Document Title</title>
        </head>
        <body>
          <h1>Hello, World!</h1>
          <p>This is a paragraph.</p>
        </body>
      </html>

이 문서의 DOM 트리는 다음과 같이 보일 거야:

Text

    
      document
      └── html
          ├── head
          │   └── title
          │       └── #text: "Document Title"
          └── body
              ├── h1
              │   └── #text: "Hello, World!"
              └── p
                  └── #text: "This is a paragraph."

1.2 노드의 유형

1. 요소 노드

요소 노드는 HTML 태그에 해당해. 예를 들어, <body> 태그의 노드는 요소 노드라고 불러.

예시:

이 예시에서 <body>와 <h1>는 요소 노드야.

HTML

    
      <body>
        <h1>Hello, World!</h1>
      </body>

2. 텍스트 노드

텍스트 노드는 요소 노드 내부의 텍스트를 포함해. 텍스트 노드는 요소 노드의 자식 노드로 존재하며 문자열 데이터를 포함하고 있어.

예시:

이 예시에서 텍스트 "Hello, World!"는 <h1> 노드의 자식인 텍스트 노드야.

HTML

    
      <h1>Hello, World!</h1>

3. 주석 노드

주석 노드는 HTML 주석을 나타내며, 로 끝나.

예시:

이 예시에서 는 주석 노드야.

HTML

    
      <!-- This is a comment -->

      <p>This is a paragraph.</p>

4. 문서 노드

문서 노드는 DOM 트리의 루트 노드이며, 문서의 다른 모든 노드의 부모 노드야.

예시:

JavaScript의 document 객체는 문서 노드를 나타내:

JavaScript

    
      console.log(document);

1.3 DOM 노드와의 상호작용

1. 노드 정보 얻기

노드 객체의 속성을 통해 특정 노드에 대한 정보를 얻을 수 있어. 예를 들어, 노드의 유형, 이름, 내용을 알 수 있지.

예시:

HTML

    
      <html>
        <head>
          <title>내 웹사이트</title>
        </head>
        <body>
          <h1>안녕, 세상!</h1>
        </body>
      </html>

JavaScript

    
      const heading = document.querySelector('h1');

      console.log(heading.nodeName); // 출력: H1
      console.log(heading.nodeType); // 출력: 1 (요소 노드)
      console.log(heading.textContent); // 출력: "안녕, 세상!"

2. 노드 내용 수정

DOM 속성과 메서드를 사용하여 노드의 내용을 변경할 수 있어.

예시:

JavaScript

    
      const paragraph = document.querySelector('p');
      paragraph.textContent = 'Updated text content';

3. 자식 노드 다루기

DOM의 각 노드는 자식 노드를 가질 수 있으며, 자식 노드에 접근하고 수정할 수 있어.

예시:

HTML

    
      <html>
        <head>
          <title>내 웹사이트</title>
        </head>
        <body>
          <ul>
            <li>회사 소개</li>
            <li>채용 정보</li>
            <li>연락처</li>
          </ul>
        </body>
      </html>

JavaScript

    
      const list = document.querySelector('ul');
      const firstItem = list.firstElementChild;
      const lastItem = list.lastElementChild;

      console.log(firstItem.textContent); // 첫 번째 리스트 항목의 텍스트 출력
      console.log(lastItem.textContent); // 마지막 리스트 항목의 텍스트 출력

1.4 유용한 속성들

1. 속성 nodeName과 nodeType

nodeName은 노드 이름을 반환해
nodeType은 노드 유형을 반환해 (예: 1은 요소 노드, 3은 텍스트 노드)

예시:

HTML

    
      <html>
        <head>
          <title>내 웹사이트</title>
        </head>
        <body>
          <h1>안녕, 세상!</h1>
        </body>
      </html>

JavaScript

    
      const element = document.querySelector('h1');

      console.log(element.nodeName); // 출력: H1
      console.log(element.nodeType); // 출력: 1

2. 속성 textContent와 innerHTML

textContent는 노드의 텍스트 콘텐츠를 반환하거나 설정해
innerHTML은 노드의 HTML 콘텐츠를 반환하거나 설정해

예시:

HTML

    
      <html>
        <head>
          <title>내 웹사이트</title>
        </head>
        <body>
          <p>정말 <b>흥미롭고</b> <b>유익한</b> 문단!</p>
        </body>
      </html>

JavaScript

    
      const element = document.querySelector('p');

      console.log(element.textContent); // 문단의 텍스트 콘텐츠 출력
      console.log(element.innerHTML); // 문단의 HTML 콘텐츠 출력

3. 속성 parentNode, childNodes, firstChild와 lastChild

parentNode는 부모 노드를 반환해
childNodes는 모든 자식 노드의 컬렉션을 반환해
firstChild는 첫 번째 자식 노드를 반환해
lastChild는 마지막 자식 노드를 반환해

예시:

HTML

    
      <html>
        <head>
          <title>내 웹사이트</title>
        </head>
        <body>
          <ul>
            <li>회사 소개</li>
            <li>채용 정보</li>
            <li>연락처</li>
          </ul>
        </body>
      </html>

JavaScript

    
      const element = document.querySelector('ul');

      console.log(element.parentNode); // 부모 노드 출력
      console.log(element.childNodes); // 자식 노드 컬렉션 출력
      console.log(element.firstChild); // 첫 번째 자식 노드 출력
      console.log(element.lastChild); // 마지막 자식 노드 출력

이전 이전 레슨

다음 다음 레슨

코멘트

TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION