DOM을 활용한 웹 페이지 엘리먼트 조작 이모지: 💻

웹 개발을 배우는 여러분, 웹 페이지를 마법처럼 바꿀 수 있는 힘이 있다면 어떨까요? 바로 DOM, 즉 문서 객체 모델을 이해하고 활용하는 것입니다. DOM은 웹 페이지의 구조를 프로그래밍 언어가 이해할 수 있는 형태로 만들어줍니다. 이를 통해 우리는 웹 페이지의 내용, 구조, 스타일을 동적으로 조작할 수 있습니다.

DOM이란 무엇인가요?

DOM은 웹 페이지를 브라우저가 이해할 수 있는 구조로 표현한 것입니다. HTML 문서를 트리 구조로 변환시켜 각 요소를 노드(node)로 표현합니다. 이 트리 구조를 통해 개발자는 JavaScript를 사용하여 웹 페이지의 요소를 찾아내고, 수정하거나 업데이트할 수 있습니다.

기본적인 DOM 조작 방법

웹 페이지의 요소를 조작하는 기본적인 방법을 알아보겠습니다. 여기서는 JavaScript를 사용한 예시를 들어 설명합니다.

요소 찾기

웹 페이지에서 특정 요소를 찾기 위해 document.getElementById() 나 document.querySelector() 같은 메소드를 사용할 수 있습니다.

// ID를 사용하여 요소 찾기
var title = document.getElementById('title');

// 셀렉터를 사용하여 요소 찾기
var button = document.querySelector('.my-button');

요소 내용 변경하기

찾은 요소의 내용을 변경하고 싶다면, innerHTML 또는 textContent 속성을 사용할 수 있습니다.

// 요소의 HTML 내용 변경하기
title.innerHTML = '새로운 제목';

// 요소의 텍스트 내용 변경하기
button.textContent = '클릭하세요';

요소 스타일 변경하기

요소의 스타일을 동적으로 변경하고 싶다면, style 속성을 이용하여 CSS 속성을 변경할 수 있습니다.

// 요소의 색상 변경하기
title.style.color = 'blue';

// 요소의 배경색 변경하기
button.style.backgroundColor = 'yellow';

요소 추가 및 삭제하기

새로운 요소를 추가하거나 기존 요소를 삭제하는 것도 가능합니다.

// 새 요소 생성 및 추가하기
var newParagraph = document.createElement('p');
newParagraph.textContent = '이것은 새로운 문단입니다.';
document.body.appendChild(newParagraph);

// 요소 삭제하기
document.body.removeChild(newParagraph);

DOM을 이해하고 활용하는 것은 웹 개발에서 매우 중요합니다. 이를 통해 사용자와 상호작용하는 동적인 웹 페이지를 만들 수 있습니다. 여러분도 이제 DOM의 기본을 이해했으니, 실제 코드에 적용해보며 더 많은 것을 배워나가세요!