[JavaScript] DOM 객체 처리하는 방법 5단계

Coding 공부/JavaScript

[JavaScript] DOM 객체 처리하는 방법 5단계

CBJH 2024. 5. 29. 15:08

728x90

자바스크립트에서 DOM(Document Object Model) 객체를 처리하는 방법에 대해 5단계로 나누어 설명해드릴게요. 각각의 단계에서 자주 사용되는 메서드와 속성을 예시와 함께 설명하겠습니다.

1단계: DOM 요소 선택하기

DOM 요소를 선택하는 것은 첫 번째 단계입니다. 이를 통해 HTML 요소에 접근할 수 있습니다.

document.getElementById(id): 특정 id를 가진 요소를 선택합니다.

const element = document.getElementById('myElement');

document.querySelector(selector): CSS 선택자를 사용하여 첫 번째 일치하는 요소를 선택합니다.

const element = document.querySelector('.myClass');
const inputElement = document.querySelector('input[name="myInput"]');

document.querySelectorAll(selector): CSS 선택자를 사용하여 모든 일치하는 요소를 선택합니다. NodeList를 반환합니다.

const elements = document.querySelectorAll('.myClass');

2단계: DOM 요소의 속성 및 값 다루기

선택한 요소의 속성과 값을 읽거나 수정할 수 있습니다.

element.getAttribute(attributeName): 요소의 특정 속성 값을 가져옵니다.

element.setAttribute(attributeName, value): 요소의 특정 속성 값을 설정합니다.

imageElement.setAttribute('src', 'newImage.jpg');

lement.value: 입력 요소(input, textarea 등)의 값을 가져오거나 설정합니다.

const inputValue = inputElement.value; inputElement.value = 'New Value';

element.textContent: 요소의 텍스트 콘텐츠를 가져오거나 설정합니다.

const text = paragraphElement.textContent; paragraphElement.textContent = 'New Text';

element.innerHTML: 요소의 HTML 콘텐츠를 가져오거나 설정합니다.

const htmlContent = divElement.innerHTML; divElement.innerHTML = '<p>New HTML content</p>';

3단계: DOM 요소 스타일 변경하기

선택한 요소의 스타일을 변경할 수 있습니다.

element.style.property: 인라인 스타일을 설정합니다.

element.style.color = 'red'; element.style.backgroundColor = 'blue';

element.classList.add(className): 클래스 추가.

element.classList.add('newClass');

element.classList.remove(className): 클래스 제거.

element.classList.remove('oldClass');

element.classList.toggle(className): 클래스 토글.

element.classList.toggle('active');

4단계: DOM 요소 이벤트 처리

이벤트 리스너를 사용하여 사용자 상호작용을 처리합니다.

element.addEventListener(event, callback): 이벤트 리스너 추가.

buttonElement.addEventListener('click', function() { alert('Button clicked!'); });

element.removeEventListener(event, callback): 이벤트 리스너 제거.

const handleClick = function() {
  alert('Button clicked!');
};
buttonElement.addEventListener('click', handleClick);
buttonElement.removeEventListener('click', handleClick);

5단계: DOM 요소 추가 및 제거

새로운 요소를 생성하고 기존 요소를 추가하거나 제거할 수 있습니다.

document.createElement(tagName): 새로운 요소 생성.

const newDiv = document.createElement('div');

element.appendChild(newChild): 자식 요소로 추가.

parentElement.appendChild(newDiv);

element.removeChild(childElement): 자식 요소 제거.

parentElement.removeChild(childElement);

element.insertBefore(newElement, referenceElement): 참조 요소 앞에 삽입.

parentElement.insertBefore(newDiv, referenceElement);

종합 예제

다음은 위 단계를 종합하여 실제 예제입니다.

<!DOCTYPE html>
<html>
<head>
  <title>DOM 조작 예제</title>
</head>
<body>
  <div id="content">
    <p class="message">Hello, world!</p>
    <input type="text" id="inputField" value="Initial value">
    <button id="changeTextButton">텍스트 변경</button>
  </div>
  
  <script>
    // 1단계: 요소 선택
    const contentDiv = document.getElementById('content');
    const messageParagraph = document.querySelector('.message');
    const inputField = document.querySelector('#inputField');
    const changeTextButton = document.querySelector('#changeTextButton');

    // 2단계: 속성 및 값 다루기
    console.log(messageParagraph.textContent); // "Hello, world!"
    messageParagraph.textContent = 'Hello, DOM!';
    console.log(inputField.value); // "Initial value"
    inputField.value = 'New value';

    // 3단계: 스타일 변경
    messageParagraph.style.color = 'blue';
    messageParagraph.classList.add('highlight');

    // 4단계: 이벤트 처리
    changeTextButton.addEventListener('click', function() {
      messageParagraph.textContent = inputField.value;
    });

    // 5단계: 요소 추가 및 제거
    const newParagraph = document.createElement('p');
    newParagraph.textContent = 'This is a new paragraph.';
    contentDiv.appendChild(newParagraph);

    // 3초 후에 새 요소 제거
    setTimeout(() => {
      contentDiv.removeChild(newParagraph);
    }, 3000);
  </script>
</body>
</html>

이 예제는 HTML 요소를 선택하고, 속성을 읽고 설정하며, 스타일을 변경하고, 이벤트를 처리하고, 요소를 추가 및 제거하는 방법을 보여줍니다. 이를 통해 DOM을 다루는 기본적인 방법을 익힐 수 있습니다.