▶ JavaScript HTML DOM

JavaScript DOM HTML

JavaScript DOM HTML: HTML 요소 조작과 관리

JavaScript DOM HTML은 HTML 문서의 구조와 내용을 동적으로 조작하고 관리하는 방법입니다. DOM은 HTML 요소를 객체로 표현하며, JavaScript를 통해 이 객체를 선택하고, 수정하고, 삭제하는 작업을 수행할 수 있습니다. 이 가이드는 JavaScript를 사용하여 HTML 요소를 조작하는 방법에 대한 기본 개념과 다양한 메서드를 소개합니다.

1. HTML과 DOM의 관계

*HTML (HyperText Markup Language)**은 웹 페이지의 구조를 정의하는 마크업 언어입니다. 브라우저는 HTML 문서를 읽고 이를 **DOM (Document Object Model)**으로 변환합니다. DOM은 HTML 요소를 객체로 표현하며, JavaScript를 사용하여 이를 조작할 수 있습니다.

1.1. DOM 트리 구조

HTML 문서는 DOM 트리로 표현됩니다. 각 HTML 요소는 트리의 노드로 변환되어 계층 구조를 형성합니다.

예를 들어, 다음과 같은 HTML 코드가 있을 때:

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

이 HTML 문서는 다음과 같은 DOM 트리로 변환됩니다:

<html>
- <head>
  - <title>
- <body>
  - <h1>
  - <p>

2. HTML 요소 선택 및 조작

JavaScript를 사용하여 HTML 요소를 선택하고 조작하는 데 사용되는 주요 메서드와 속성을 소개합니다.

2.1. HTML 요소 선택 방법

JavaScript는 여러 메서드를 제공하여 HTML 요소를 선택할 수 있습니다.

2.1.1. `getElementById()`

특정 ID를 가진 요소를 선택합니다.

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

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

2.1.2. `getElementsByClassName()`

특정 클래스를 가진 모든 요소를 선택합니다.

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

<script>
  const elements = document.getElementsByClassName('example');
  console.log(elements[0].textContent);  // First paragraph
</script>

2.1.3. `querySelector()`

CSS 선택자를 사용하여 첫 번째 일치하는 요소를 선택합니다.

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

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

2.2. HTML 요소 조작 방법

선택한 HTML 요소의 속성, 텍스트, 스타일 등을 변경하는 메서드를 사용하면 웹 페이지의 동적 업데이트가 가능합니다.

2.2.1. `textContent`

*textContent*를 사용하여 요소의 텍스트를 읽거나 수정할 수 있습니다.

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

<script>
  const element = document.getElementById('demo');
  element.textContent = 'Updated text';  // 텍스트 변경
</script>

2.2.2. `innerHTML`

*innerHTML*을 사용하여 요소의 HTML 콘텐츠를 읽거나 수정할 수 있습니다.

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

<script>
  const contentDiv = document.getElementById('content');
  contentDiv.innerHTML = '<strong>Updated content</strong>';  // HTML 콘텐츠 변경
</script>

2.2.3. `setAttribute()`

*setAttribute()*를 사용하여 요소의 속성을 설정할 수 있습니다.

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

<script>
  const image = document.getElementById('myImage');
  image.setAttribute('src', 'new_image.jpg');  // src 속성 변경
</script>

2.2.4. `style` 프로퍼티

style 프로퍼티를 사용하여 요소의 인라인 스타일을 변경할 수 있습니다.

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

<script>
  const element = document.getElementById('demo');
  element.style.color = 'blue';    // 텍스트 색상 변경
  element.style.fontSize = '20px'; // 텍스트 크기 변경
</script>

3. HTML 요소 생성 및 삭제

JavaScript를 사용하여 동적으로 요소를 생성하거나 기존 요소를 삭제할 수 있습니다. 이를 통해 실시간 업데이트가 필요한 웹 페이지를 구현할 수 있습니다.

3.1. 새로운 요소 생성

createElement() 메서드를 사용하여 새로운 HTML 요소를 생성합니다.

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

<script>
  const container = document.getElementById('container');
  const newPara = document.createElement('p');  // 새로운 <p> 요소 생성
  newPara.textContent = 'This is a new paragraph';
  container.appendChild(newPara);  // <div> 안에 추가
</script>

3.2. 요소 삭제

remove() 메서드를 사용하여 선택한 요소를 삭제할 수 있습니다.

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

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

4. DOM 이벤트 처리

JavaScript DOM 이벤트 처리를 사용하여 사용자 상호작용을 감지하고 특정 작업을 수행할 수 있습니다.

4.1. 이벤트 리스너 추가

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

<button id="myButton">Click Me!</button>

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

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

이 코드에서는 버튼이 클릭될 때마다 알림 창이 표시됩니다.

5. Document 객체와 DOM 요소

Document 객체는 DOM의 루트이며, HTML 문서의 모든 요소에 접근할 수 있는 인터페이스를 제공합니다. Document 객체를 사용하여 HTML 요소를 선택하고 조작할 수 있습니다.

5.1. Document 객체의 속성

document.title: 문서의 제목을 가져오거나 설정합니다.
document.body: 문서의 <body> 요소를 나타냅니다.
document.head: 문서의 <head> 요소를 나타냅니다.

5.2. Document 객체의 메서드

document.createElement(tagName): 새로운 HTML 요소를 생성합니다.
document.getElementById(id): 특정 ID를 가진 요소를 선택합니다.
document.querySelector(selector): CSS 선택자를 사용하여 첫 번째 일치하는 요소를 선택합니다.

요약

JavaScript DOM HTML은 HTML 문서를 동적으로 조작하고 관리하는 강력한 도구입니다. DOM 요소를 선택하고, 조작하고, 이벤트를 처리하는 다양한 메서드를 제공하여 동적이고 상호작용적인 웹 페이지를 만들 수 있습니다.

DOM 요소 선택: getElementById(), querySelector(), getElementsByClassName() 등을 사용하여 특정 요소에 접근합니다.
DOM 요소 조작: textContent, innerHTML, setAttribute() 등을 사용하여 텍스트와 속성을 변경합니다.
DOM 요소 생성 및 삭제: createElement()와 remove()를 사용해 DOM 요소를 추가하거나 삭제합니다.
DOM 이벤트 처리: addEventListener()를 사용하여 사용자 상호작용을 감지하고 처리합니다.

DOM HTML을 잘 활용하면 동적이고 상호작용적인 웹 애플리케이션을 쉽게 만들 수 있습니다.

코딩 스쿨 JavaScript