[JavaScript 문법] 37일차: DOM 조작 기초

DOM 조작이란?

DOM 조작은 JavaScript를 사용하여 웹 페이지의 요소를 동적으로 생성, 수정, 삭제하는 과정을 의미합니다. 이를 통해 사용자는 웹 페이지와 상호작용할 수 있으며, 웹 애플리케이션의 동적 콘텐츠를 쉽게 관리할 수 있습니다.

요소 생성

DOM 요소를 생성하기 위해 document.createElement 메서드를 사용합니다.

예제: 요소 생성

let newElement = document.createElement('div');
newElement.textContent = 'Hello, World!';

요소 추가

생성된 요소를 DOM에 추가하기 위해 appendChild 또는 insertBefore 메서드를 사용합니다.

예제: 요소 추가

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

<script>
  let container = document.getElementById('container');
  let newElement = document.createElement('div');
  newElement.textContent = 'Hello, World!';
  container.appendChild(newElement);
</script>

요소 삭제

요소를 DOM에서 제거하기 위해 removeChild 메서드를 사용합니다.

예제: 요소 삭제

<div id="container">
  <div id="element">This will be removed.</div>
</div>

<script>
  let container = document.getElementById('container');
  let element = document.getElementById('element');
  container.removeChild(element);
</script>

요소 속성 변경

요소의 속성을 변경하기 위해 setAttribute 메서드와 classList 객체를 사용할 수 있습니다.

예제: setAttribute

<div id="element">This is an element.</div>

<script>
  let element = document.getElementById('element');
  element.setAttribute('class', 'new-class');
  console.log(element.getAttribute('class')); // 'new-class'
</script>

예제: classList

<div id="element" class="old-class">This is an element.</div>

<script>
  let element = document.getElementById('element');
  element.classList.add('new-class');
  console.log(element.className); // 'old-class new-class'
  element.classList.remove('old-class');
  console.log(element.className); // 'new-class'
</script>

텍스트 내용 변경

요소의 텍스트 내용을 변경하기 위해 textContent와 innerHTML 속성을 사용할 수 있습니다.

예제: textContent

<div id="element">Old text</div>

<script>
  let element = document.getElementById('element');
  element.textContent = 'New text';
  console.log(element.textContent); // 'New text'
</script>

예제: innerHTML

<div id="element">Old text</div>

<script>
  let element = document.getElementById('element');
  element.innerHTML = '<strong>New text</strong>';
  console.log(element.innerHTML); // '<strong>New text</strong>'
</script>

스타일 변경

요소의 스타일을 변경하기 위해 style 객체를 사용할 수 있습니다.

예제: 스타일 변경

<div id="element" style="color: red;">This is an element.</div>

<script>
  let element = document.getElementById('element');
  element.style.color = 'blue';
  element.style.backgroundColor = 'yellow';
  console.log(element.style.color); // 'blue'
</script>

DOM 조작 예제

예제: 리스트 항목 추가 및 삭제

<ul id="list">
  <li>Item 1</li>
  <li>Item 2</li>
</ul>
<button id="addButton">Add Item</button>
<button id="removeButton">Remove Item</button>

<script>
  let list = document.getElementById('list');
  let addButton = document.getElementById('addButton');
  let removeButton = document.getElementById('removeButton');

  addButton.addEventListener('click', () => {
    let newItem = document.createElement('li');
    newItem.textContent = 'New Item';
    list.appendChild(newItem);
  });

  removeButton.addEventListener('click', () => {
    if (list.children.length > 0) {
      list.removeChild(list.lastElementChild);
    }
  });
</script>

결론

DOM 조작은 웹 페이지의 동적 콘텐츠를 관리하는 데 중요한 역할을 합니다. 이번 글에서는 요소 생성, 추가, 삭제, 속성 변경, 텍스트 내용 변경, 스타일 변경 등 기본적인 DOM 조작 방법에 대해 배웠습니다. 다음 글에서는 DOM 조작 심화 주제에 대해 알아보겠습니다.

다음 글에서 만나요!