▶ JavaScript HTML DOM

JavaScript DOM Intro

JavaScript DOM: 소개 및 기본 개념

*DOM(Document Object Model)**은 HTML, XML 문서의 구조화된 표현입니다. JavaScript는 DOM을 통해 웹 페이지의 콘텐츠와 구조를 동적으로 제어하고 조작할 수 있습니다. DOM은 문서의 요소들을 **객체(Object)**로 표현하며, JavaScript를 사용해 HTML 요소를 추가, 삭제, 수정하거나 스타일을 변경할 수 있습니다.

이 가이드는 JavaScript DOM의 기본 개념과 사용법을 소개합니다.

1. DOM이란?

DOM은 웹 페이지의 구조화된 트리 구조로, HTML 문서의 각 요소를 객체로 다룹니다. 이 트리 구조에서 각 노드는 HTML 요소, 텍스트, 속성 등을 나타냅니다. JavaScript는 DOM을 조작함으로써 실시간으로 웹 페이지의 콘텐츠를 변경할 수 있습니다.

1.1. DOM 트리 구조 예시

다음은 HTML 문서가 DOM 트리 구조로 표현되는 방식입니다.

<!DOCTYPE html>
<html>
  <head>
    <title>Document Title</title>
  </head>
  <body>
    <h1>Heading</h1>
    <p>Paragraph text</p>
  </body>
</html>

<html>, <head>, <body>, <h1> 등은 각각 DOM 트리의 노드입니다.
JavaScript는 각 노드에 접근하고 변경하거나 새로운 노드를 추가할 수 있습니다.

2. DOM 요소 선택

JavaScript는 다양한 DOM 요소 선택 메서드를 제공하여, 특정 HTML 요소에 접근하고 해당 요소를 조작할 수 있습니다. 주로 사용하는 DOM 요소 선택 메서드는 getElementById(), querySelector(), getElementsByClassName() 등이 있습니다.

2.1. `getElementById()`

*getElementById()*는 ID 속성을 사용해 단일 요소를 선택합니다.

<p id="demo">Hello World</p>

<script>
  const element = document.getElementById('demo');
  console.log(element.textContent);  // Hello World
</script>

2.2. `querySelector()`와 `querySelectorAll()`

querySelector(): CSS 선택자를 사용해 첫 번째 일치하는 요소를 선택합니다.
querySelectorAll(): CSS 선택자를 사용해 모든 일치하는 요소들을 NodeList로 반환합니다.

<p class="example">First paragraph</p>
<p class="example">Second paragraph</p>

<script>
  const firstPara = document.querySelector('.example');
  console.log(firstPara.textContent);  // First paragraph

  const allParas = document.querySelectorAll('.example');
  allParas.forEach(para => console.log(para.textContent));
  // First paragraph
  // Second paragraph
</script>

3. DOM 요소 조작

DOM 요소를 선택한 후, 텍스트, 속성, 스타일을 동적으로 변경할 수 있습니다. 주요 DOM 조작 방법은 textContent, innerHTML, setAttribute(), style 등을 사용합니다.

3.1. 텍스트 콘텐츠 변경

*textContent*는 요소의 텍스트 콘텐츠를 읽거나 수정할 수 있습니다.

<p id="demo">Original text</p>

<script>
  const element = document.getElementById('demo');
  element.textContent = 'Updated text';
</script>

3.2. HTML 내용 변경

*innerHTML*은 요소의 HTML 콘텐츠를 동적으로 변경할 수 있습니다.

<div id="content">This is the original content</div>

<script>
  const contentDiv = document.getElementById('content');
  contentDiv.innerHTML = '<strong>Updated content</strong>';
</script>

3.3. 속성 변경

*setAttribute()*를 사용해 HTML 속성을 설정하거나 변경할 수 있습니다.

<img id="myImage" src="old_image.jpg" alt="Old Image">

<script>
  const image = document.getElementById('myImage');
  image.setAttribute('src', 'new_image.jpg');
  image.setAttribute('alt', 'New Image');
</script>

4. DOM 이벤트 처리

*이벤트(Event)**는 사용자 상호작용(클릭, 입력 등)이나 브라우저 동작에 의해 발생합니다. JavaScript는 이러한 이벤트를 감지하고, 이벤트 핸들러를 통해 특정 작업을 수행할 수 있습니다.

4.1. 이벤트 리스너 추가

addEventListener() 메서드를 사용하여 DOM 요소에 이벤트 리스너를 추가할 수 있습니다.

<button id="myButton">Click me</button>

<script>
  const button = document.getElementById('myButton');

  button.addEventListener('click', () => {
    alert('Button clicked!');
  });
</script>

click, keydown, **mouseover*와 같은 다양한 이벤트에 대해 이벤트 리스너를 등록할 수 있습니다.

5. DOM 요소 생성 및 삭제

JavaScript를 사용하여 새로운 DOM 요소를 생성하거나 기존 요소를 삭제할 수 있습니다. 이를 통해 동적인 웹 페이지를 구현할 수 있습니다.

5.1. 새로운 요소 생성

*createElement()*를 사용해 새로운 요소를 생성하고, **appendChild()*를 사용해 DOM 트리에 추가할 수 있습니다.

<div id="container"></div>

<script>
  const container = document.getElementById('container');
  const newPara = document.createElement('p');
  newPara.textContent = 'This is a new paragraph';
  container.appendChild(newPara);
</script>

5.2. 요소 삭제

remove() 메서드를 사용해 요소를 삭제할 수 있습니다.

<p id="demo">This paragraph will be removed.</p>

<script>
  const element = document.getElementById('demo');
  element.remove();
</script>

6. DOM 트리 탐색

JavaScript는 부모, 자식, 형제 노드 등 DOM 트리에서의 요소 관계를 탐색할 수 있는 다양한 방법을 제공합니다.

6.1. 주요 DOM 탐색 프로퍼티

parentNode: 부모 노드
childNodes, children: 자식 노드 리스트
firstChild, lastChild: 첫 번째/마지막 자식 노드
nextSibling, previousSibling: 다음/이전 형제 노드

6.2. DOM 탐색 예시

<ul id="myList">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<script>
  const list = document.getElementById('myList');
  const firstItem = list.firstChild;
  console.log(firstItem.textContent);  // Item 1

  const nextItem = firstItem.nextSibling;
  console.log(nextItem.textContent);  // Item 2
</script>

요약

JavaScript의 DOM은 HTML 문서의 구조를 조작하는 강력한 도구입니다. DOM을 통해 HTML 요소에 접근하고, 콘텐츠를 변경하며, 이벤트 처리를 추가하고, 동적인 웹 페이지를 구현할 수 있습니다.

DOM 요소 선택: getElementById(), querySelector(), getElementsByClassName() 등을 사용하여 특정 요소에 접근합니다.
DOM 요소 조작: textContent, innerHTML, setAttribute() 등을 사용하여 요소의 콘텐츠나 속성을 수정할 수 있습니다.
이벤트 처리: **addEventListener()*를 사용해 사용자 상호작용 이벤트를 감지하고 처리할 수 있습니다.
요소 생성/삭제: **createElement()*와 **remove()*를 사용해 DOM 요소를 추가하거나 삭제할 수 있습니다.
DOM 트리 탐색: 부모, 자식, 형제 노드를 탐색하여 요소 간 관계를 파악할 수 있습니다.

DOM을 잘 활용하면 동적이고 상호작용적인 웹 페이지를 쉽게 만들 수 있습니다.

코딩 스쿨 JavaScript