DOM 노드 마스터하기: 프로퍼티 탐구와 실전 활용법

DOM 노드와 공통 프로퍼티

모든 DOM 노드는 Node 클래스를 기반으로 하며, 다음과 같은 공통 프로퍼티를 제공합니다.

• nodeType: 노드의 종류를 나타내는 숫자입니다.
  • 1: 요소 노드
  • 3: 텍스트 노드
  • 8: 주석 노드
• nodeName / tagName
  • nodeName은 모든 노드에서 사용할 수 있으며, 요소 노드인 경우 태그 이름을 반환합니다.
  • tagName은 요소 노드에서만 사용 가능하며, HTML 모드에서는 항상 대문자로 반환됩니다.

// HTML 예제:
// <div id="demo">Hello, <span>world!</span><!-- comment --></div>

const demo = document.getElementById('demo');

// 요소 노드
console.log("demo.nodeType:", demo.nodeType); // 1
console.log("demo.nodeName:", demo.nodeName); // "DIV"
console.log("demo.tagName:", demo.tagName);   // "DIV"

// 첫 번째 자식 노드는 텍스트 노드일 수 있습니다.
const firstChild = demo.firstChild;
console.log("firstChild.nodeType:", firstChild.nodeType); // 3 (텍스트 노드)
console.log("firstChild.nodeName:", firstChild.nodeName); // "#text"

// 마지막 자식 노드 (주석)
const lastChild = demo.lastChild;
console.log("lastChild.nodeType:", lastChild.nodeType); // 8 (주석)
console.log("lastChild.nodeName:", lastChild.nodeName); // "#comment"

HTML 콘텐츠 접근: innerHTML vs. outerHTML

innerHTML

요소 내부의 HTML 콘텐츠를 문자열로 읽거나 수정할 수 있습니다.

outerHTML

요소 자체를 포함한 HTML 문자열을 반환합니다.

주의: outerHTML에 값을 할당하면 기존 요소가 DOM에서 제거되고, 새로운 HTML이 삽입됩니다.

<!-- HTML 예제: -->
<div id="box">
  <p>Paragraph inside box</p>
</div>
<script>
  const box = document.getElementById('box');

  // innerHTML 읽기
  console.log("innerHTML:", box.innerHTML);
  // 출력: "<p>Paragraph inside box</p>"

  // outerHTML 읽기
  console.log("outerHTML:", box.outerHTML);
  // 출력: "<div id="box"><p>Paragraph inside box</p></div>"

  // outerHTML 할당: 요소 전체를 대체
  box.outerHTML = '<section id="newBox">New content</section>';
  // DOM에서는 기존의 <div id="box">가 제거되고 <section id="newBox">가 삽입됩니다.
</script>

텍스트 노드 조작: nodeValue, data, textContent

nodeValue / data

텍스트 노드나 주석 노드의 내용을 읽거나 수정할 때 사용합니다.

textContent

요소 내부의 순수 텍스트만을 반환하며, HTML 태그는 제거합니다. 사용자가 입력한 데이터를 안전하게 처리할 때 유용합니다.

<!-- HTML 예제: -->
<div id="textBox">
  <p>Hello, <b>world</b>!</p>
</div>
<script>
  // <p> 요소의 텍스트 노드를 가져와 내용을 확인합니다.
  const pElem = document.querySelector('#textBox p');
  // pElem.innerHTML은 "<b>world</b>"도 포함하지만...
  console.log("innerHTML:", pElem.innerHTML); 
  // textContent는 순수 텍스트만 반환합니다.
  console.log("textContent:", pElem.textContent); 
  // 출력: "Hello, world!" (HTML 태그는 제거됨)

  // 텍스트 노드 직접 수정하기
  const textNode = pElem.firstChild; // "Hello, " 텍스트 노드
  console.log("원본 nodeValue:", textNode.nodeValue);
  textNode.nodeValue = "Hi, ";
  // 결과적으로 pElem.textContent는 "Hi, world!"로 변경됨
</script>

요소 숨기기: hidden 프로퍼티

DOM 요소에 hidden 속성이나 프로퍼티를 설정하면, CSS의 display: none과 유사하게 해당 요소가 보이지 않게 됩니다.

<!-- HTML 예제: -->
<div id="notice">This is an important notice.</div>
<script>
  const notice = document.getElementById('notice');
  
  // 요소 숨기기
  notice.hidden = true;
  
  // 2초 후에 다시 표시
  setTimeout(() => {
    notice.hidden = false;
  }, 2000);
</script>

DOM 노드 프로퍼티 활용 시 주의사항

DOM 컬렉션은 읽기 전용입니다.

childNodes, children 등은 배열과 유사하지만 직접 수정할 수 없으므로, 요소를 변경하려면 DOM 조작 메서드(예: append, removeChild)를 사용해야 합니다.

콘솔 탐색

개발자 도구의 console.dir()을 사용하면 DOM 요소의 내부 프로퍼티와 상속된 메서드들을 확인할 수 있으므로, DOM의 구조를 이해하는 데 큰 도움이 됩니다.