안녕하세요! mj입니다.

오늘은 JavaScript를 사용해 웹 페이지의 DOM을 조작하는 방법에 대해 알아보겠습니다.

DOM이란?

DOM(Document Object Model)은 HTML 문서의 구조를 표현하는 객체 모델입니다. JavaScript를 통해 DOM을 조작함으로써 웹 페이지의 내용을 동적으로 변경할 수 있습니다.

DOM을 조작하기 위해서는 먼저 원하는 요소를 선택해야 합니다. JavaScript에서는 다양한 방법으로 요소를 선택할 수 있습니다.

const title = document.getElementById('title');

위 코드는 id가 'title'인 요소를 선택하는 방법입니다.

선택한 요소의 내용을 변경할 수 있습니다.

title.innerText = '새로운 제목';

이 코드는 선택한 요소의 텍스트를 '새로운 제목'으로 변경합니다.

DOM에 새로운 요소를 추가하는 방법입니다.


const newElement = document.createElement('p');
newElement.innerText = '안녕하세요, 새로운 단락입니다!';
document.body.appendChild(newElement);

이 코드를 실행하면 새로운 단락이 페이지에 추가됩니다.

불필요한 요소를 삭제하는 방법도 가능합니다.


const elementToRemove = document.getElementById('removeMe');
elementToRemove.remove();

위 코드는 id가 'removeMe'인 요소를 삭제합니다.

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

title.style.color = 'blue';

이 코드는 제목의 색상을 파란색으로 변경합니다.

아래는 위의 내용을 종합한 예제입니다:






    
    DOM 조작 예제


    원래 제목