웹 시스템 개발 #DOM 초급편

학교 공부를 복습할 겸 적는 것이기에 내용이 부족할 수 있습니다.

 

부족한 것은 상관 없으나, 잘못된 부분이 발견된다면 지적해주시면 감사하겠습니다.

etc-image-0

 

이번 포스팅에서는 DOM에 대해 알아보는 시간을 갖고자 합니다.

 


DOM이란?

DOM은 "Document Object Model"의 약어로, HTML 문서의 구조를 나타내고 브라우저와 상호작용하기 위한 프로그래밍 인터페이스입니다. DOM은 웹 페이지의 구조, 스타일 및 내용을 변경할 수 있도록 프로그램에서 HTML 문서 데이터에 액세스할 수 있는 방법을 제공합니다.

 

DOM의 주요 특징은 다음과 같습니다.

  • 객체 지향 표현: DOM은 웹 페이지를 완전한 객체 지향 방식으로 나타냅니다. HTML 문서의 각 요소(element)들은 브라우저에서 로딩되면서 객체화됩니다. 이를 통해 JavaScript와 같은 스크립트 언어를 사용하여 문서의 구조, 스타일 및 내용을 수정할 수 있습니다.
  • DOM 트리: DOM은 트리 구조로 이루어져 있으며, 트리는 노드로 구성됩니다. 루트 노드는 문서(document)이며, 그 하위에는 html 요소가 있습니다. 각각의 노드는 Node 클래스의 인스턴스이며, parentNode 및 childNode와 같은 속성을 가지고 있습니다. 이러한 노드를 통해 문서 구조를 나타내고 조작할 수 있습니다.

etc-image-1
DOM 트리 / 출처 - 아주대학교 웹시스템 수업 PPT 자료

 

DOM은 프로그래밍 언어가 아니지만, JavaScript와 함께 사용됨으로써 JavaScript 언어가 웹 페이지, XML 페이지 및 관련 요소를 모델링하고 조작하는 데 사용하는 일종의 인터페이스입니다.

 

다른 프레임워크 및 라이브러리 (예: jQuery, ReactJS, VueJS, NodeJS) 역시 DOM을 기반으로 웹 페이지를 다룹니다.

 

아래는 DOM에서 사용되는 "get" 메서드 예시이며, 이전 포스팅들에서 몇 번 보신적이 있을 것입니다. 

  1. document.getElementById: 해당 ID를 가진 요소를 검색합니다. 
  2. document.getElementsByClassName: 지정된 클래스 이름을 가진 모든 요소의 컬렉션을 반환합니다. 

 


DOM 요소(element) 조작

DOM 요소를 조작하는 방법에 대해 설명해 드리겠습니다.

 

textContentinnerHTML

  • 각 요소는 textContentinnerHTML이라는 두 가지 속성을 가지고 있습니다.
  • textContent는 해당 요소의 내용을 접근하고 변경하는 데 사용됩니다. 이 속성은 HTML 태그를 제외하고 텍스트 데이터만을 제공합니다.
  • innerHTML은 HTML을 생성하고 해당 요소에 추가하는 데 사용됩니다. 이때, 새로운 DOM 노드를 만듭니다.
const para1 = document.getElementsByTagName('p')[0];
para1.textContent;      // "This is a simple HTML file."
para1.innerHTML;       // "This is a <i>simple</i> HTML file."
para1.textContent = "Modified HTML file";
para1.innerHTML = "<i>Modified</i> HTML file";📋

 


createElement 

  • document.createElement 메서드를 사용하여 새 요소를 생성할 수 있습니다. 그러나 이 요소를 DOM에 추가하지는 않습니다.
  • 새 요소를 DOM에 추가하려면 insertBeforeappendChild와 같은 메서드를 사용해야 합니다.
const p1 = document.createElement('p');
const p2 = document.createElement('p');
p1.textContent = "I was created dynamically!";
p2.textContent = "I was also created dynamically!";
const parent = document.getElementById('content'); 
const firstChild = parent.childNodes[0];
parent.insertBefore(p1, firstChild); // p1을 첫 번째 자식으로 삽입
parent.appendChild(p2);             // p2를 마지막 자식으로 추가📋

 


정리

 

innerHTMLtextContent는 DOM 요소의 콘텐츠를 다루는 데 사용되는 두 가지 속성입니다.

 

그러나 innerHTML와 textContent 간에 중요한 차이점이 있습니다

  1. innerHTML
    • innerHTML은 해당 요소의 HTML 내용을 나타냅니다.
    • HTML 태그를 포함한 모든 내용을 문자열로 반환합니다.
    • HTML을 삽입, 변경 또는 추가할 때 사용됩니다.
    • 주의: 사용자로부터 입력받는 데이터를 innerHTML에 삽입할 때 보안상 주의가 필요합니다. 사용자 입력을 미리 검증하고 이스케이프 처리해야 합니다.
  2. textContent
    • textContent는 해당 요소의 텍스트 내용을 나타냅니다.
    • HTML 태그를 해석하지 않고 순수한 텍스트로 반환합니다.
    • 텍스트 노드를 읽거나 수정할 때 사용됩니다.
    • HTML이 아니라 텍스트 데이터에만 관심이 있을 때 유용합니다.

예를 들어, 다음 HTML 요소가 있다고 가정해보겠습니다.

<div id="example">
  <p>This is <em>some</em> text.</p>
</div>📋
  • document.getElementById("example").innerHTML은 "<p>This is <em>some</em> text.</p>" 를 반환합니다.
  • document.getElementById("example").textContent은 "This is some text."를 반환합니다.

코드예시

<!DOCTYPE html>
<html>
<head>
  <title>DOM Manipulation Example</title>
</head>
<body>
  <div id="content">
    <p>This is a simple HTML file.</p>
  </div>

  <button id="updateText">Update Text</button>
  <button id="addElement">Add Element</button>
  <button id="updateHTML">Update HTML</button>
  <script>
    const updateTextButton = document.getElementById("updateText");
    const addElementButton = document.getElementById("addElement");
    const contentDiv = document.getElementById("content");
    const updateHTMLButton = document.getElementById("updateHTML");

    updateHTMLButton.addEventListener("click", function() {
    const contentDiv = document.getElementById("content");
    contentDiv.innerHTML = "<p>This is <em>updated</em> HTML content.</p>";
    });
    
    updateTextButton.addEventListener("click", function() {
      const paragraph = document.querySelector("p");
      paragraph.textContent = "Modified HTML file";
    });

    addElementButton.addEventListener("click", function() {
      const newParagraph = document.createElement("p");
      newParagraph.textContent = "This is a new paragraph!";
      contentDiv.appendChild(newParagraph);
    });
  </script>
</body>
</html>📋

스타일링

DOM 요소에 스타일을 적용하는 방법과 CSS 클래스를 사용하는 방법에 대해 설명해 드리겠습니다.

 

스타일 직접 변경

  • DOM 요소의 스타일을 변경할 수 있지만, 일반적으로 CSS 클래스를 사용하는 것이 권장됩니다.
  • 예를 들어, 'unique'라는 단어를 포함하는 모든 단락을 강조 표시하려면 아래와 같이 할 수 있습니다.
.highlight {
  background: #ff0;
  font-style: italic;
}

function highlightParas(containing) {
  if (typeof containing === 'string')
    containing = new RegExp(`\\b${containing}\\b`, 'i');
  const paras = document.getElementsByTagName('p');
  for (let p of paras) {
    if (!containing.test(p.textContent)) continue;
    p.classList.add('highlight');
  }
}

highlightParas('unique');📋

 

CSS 클래스 사용

  • CSS 클래스를 정의하고 요소에 클래스를 추가하여 스타일을 적용합니다.
  • 위의 코드에서 'highlight' 클래스를 정의하고, 'highlightParas' 함수에서 조건을 충족하는 각 단락에 이 클래스를 추가합니다.
  • 이 방법은 코드를 유지 관리하기 쉽게 만들며, 스타일을 변경하려면 CSS 파일에서 변경하면 됩니다.

CSS 클래스를 사용하는 것은 스타일 관리를 효율적으로 하고 코드를 더 읽기 쉽게 만들어주므로 일반적으로 권장되는 방법입이라고 합니다.