<JavaScript> 문서 객체 모델(DOM)

자바스크립트에서 문서 객체 모델(DOM)은 웹페이지의 구조를 나타내는 데 사용되는 객체 기반 표현입니다.

웹페이지는 HTML 코드로 작성되며, 브라우저는 이 코드를 해석하여 DOM을 생성합니다.

이 DOM을 통해 자바스크립트는 웹페이지 내의 요소들과 상호작용할 수 있습니다.

 

DOM 요소 선택하기

 

DOM 요소를 선택하기 위한 메서드로는 querySelector, getElementById, getElementsByClassName, getElementsByTagName 등이 있습니다.

 

이들 메서드는 DOM에서 원하는 요소를 찾아내어 조작할 수 있도록 만들어줍니다.

 

// HTML에서 id가 'header'인 요소를 선택합니다.
const header = document.getElementById('header');

// HTML에서 클래스가 'nav-item'인 요소들을 선택합니다.
const navItems = document.getElementsByClassName('nav-item');

// HTML에서 'p' 태그 요소들을 선택합니다.
const paragraphs = document.getElementsByTagName('p');

// 선택자를 사용하여 첫 번째 '.nav-item' 요소를 선택합니다.
const firstNavItem = document.querySelector('.nav-item');

// 선택자를 사용하여 모든 '.nav-item' 요소를 선택합니다.
const allNavItems = document.querySelectorAll('.nav-item');

 

DOM 요소 조작하기

 

DOM 요소를 선택한 후에는 해당 요소들의 속성, 스타일, 내용을 조작할 수 있습니다.

예를 들어, 클래스 이름 추가/삭제, 엘리먼트 값 변경, 스타일 변경 등이 가능합니다.

 

// 요소에 클래스 'active'를 추가합니다.
header.classList.add('active');

// 요소에서 클래스 'active'를 삭제합니다.
header.classList.remove('active');

// 요소의 내용을 변경합니다.
header.textContent = '새로운 헤더 제목';

// 요소의 속성 값을 변경합니다.
header.setAttribute('aria-label', 'main-header');

// 요소의 스타일을 변경합니다.
header.style.backgroundColor = 'red';

 

DOM 요소 추가, 제거, 복제하기

 

DOM에서 요소를 추가하거나 제거하려면 createElement, appendChild, removeChild, cloneNode 등의 메서드를 사용할 수 있습니다.

// 새로운 요소를 생성합니다.
const newElement = document.createElement('div');

// 생성한 요소에 내용을 추가합니다.
newElement.textContent = '새로운 요소입니다.';

// 생성한 요소를 특정 요소에 추가합니다.
document.body.appendChild(newElement);

// 특정 요소를 제거합니다.
document.body.removeChild(newElement);

// 요소를 복제합니다.
const clonedElement = newElement.cloneNode(true);

 

이벤트를 통한 DOM 조작

이벤트를 사용하여 사용자 인터랙션에 따라 DOM을 동적으로 조작할 수 있습니다.

이벤트 리스너에서 DOM 요소를 조작하는 방법을 사용하면, 웹 페이지를 더욱 상호 작용적으로 만들 수 있습니다.

const button = document.querySelector('#changeColorButton');
const container = document.querySelector('#container');

button.addEventListener('click', () => {
  container.style.backgroundColor = 'yellow';
});

 

이렇게 자바스크립트를 사용하여 DOM을 조작하면 웹페이지의 요소들을 활용하여 동적인 웹사이트를 구축할 수 있습니다.

각각의 DOM 선택 및 조작 방법을 이해하고 응용하면, 다양한 웹페이지 구조와 디자인을 쉽게 구현할 수 있습니다.

 

감사합니다.