[JavaScript 문법] 38일차: DOM 조작 심화

클래스 조작

클래스 조작은 요소의 클래스를 추가, 제거, 토글하여 스타일을 동적으로 변경할 수 있습니다. 이를 위해 classList 객체를 사용합니다.

add 메서드

classList.add 메서드는 요소에 클래스를 추가합니다.

예제

<div id="element" class="box">This is a box.</div>

<script>
  let element = document.getElementById('element');
  element.classList.add('highlight');
  console.log(element.className); // 'box highlight'
</script>

remove 메서드

classList.remove 메서드는 요소에서 클래스를 제거합니다.

예제

<div id="element" class="box highlight">This is a box.</div>

<script>
  let element = document.getElementById('element');
  element.classList.remove('highlight');
  console.log(element.className); // 'box'
</script>

toggle 메서드

classList.toggle 메서드는 클래스가 존재하면 제거하고, 존재하지 않으면 추가합니다.

예제

<div id="element" class="box">This is a box.</div>

<script>
  let element = document.getElementById('element');
  element.classList.toggle('highlight');
  console.log(element.className); // 'box highlight'
  element.classList.toggle('highlight');
  console.log(element.className); // 'box'
</script>

contains 메서드

classList.contains 메서드는 클래스가 존재하는지 확인합니다.

예제

<div id="element" class="box highlight">This is a box.</div>

<script>
  let element = document.getElementById('element');
  console.log(element.classList.contains('highlight')); // true
  console.log(element.classList.contains('active')); // false
</script>

스타일 변경

요소의 스타일을 동적으로 변경하기 위해 style 객체를 사용할 수 있습니다. CSS 속성은 CamelCase로 작성해야 합니다.

예제

<div id="element" class="box">This is a box.</div>

<script>
  let element = document.getElementById('element');
  element.style.backgroundColor = 'blue';
  element.style.width = '200px';
  element.style.height = '100px';
  console.log(element.style.backgroundColor); // 'blue'
</script>

여러 스타일 적용

여러 스타일을 한 번에 적용하기 위해 스타일 문자열을 직접 설정할 수도 있습니다.

예제

<div id="element" class="box">This is a box.</div>

<script>
  let element = document.getElementById('element');
  element.style.cssText = 'background-color: blue; width: 200px; height: 100px;';
  console.log(element.style.cssText); // 'background-color: blue; width: 200px; height: 100px;'
</script>

텍스트 조작

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

textContent

textContent 속성은 요소의 텍스트 내용을 설정하거나 반환합니다. HTML 태그는 무시됩니다.

예제

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

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

innerHTML

innerHTML 속성은 요소의 HTML 콘텐츠를 설정하거나 반환합니다. HTML 태그가 파싱되고 적용됩니다.

예제

<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>

DOM 조작 심화 예제

예제: 카드 추가 및 삭제

<div id="card-container">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
</div>
<button id="addCardButton">Add Card</button>
<button id="removeCardButton">Remove Card</button>

<script>
  let cardContainer = document.getElementById('card-container');
  let addCardButton = document.getElementById('addCardButton');
  let removeCardButton = document.getElementById('removeCardButton');

  addCardButton.addEventListener('click', () => {
    let newCard = document.createElement('div');
    newCard.classList.add('card');
    newCard.textContent = `Card ${cardContainer.children.length + 1}`;
    cardContainer.appendChild(newCard);
  });

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

결론

DOM 조작 심화는 웹 페이지의 동적 콘텐츠를 더욱 효과적으로 관리하는 방법을 제공합니다. 이번 글에서는 클래스 조작, 스타일 변경, 텍스트 조작 등 심화된 DOM 조작 방법에 대해 배웠습니다. 다음 글에서는 이벤트 처리 기초에 대해 알아보겠습니다.

다음 글에서 만나요!