2.1 DOM이란?

2.1 DOM이란?

DOM(Document Object Model)은 웹 페이지를 구조화된 형태로 표현하는 객체입니다. HTML 및 XML 문서를 객체로 표현하여, 스크립트 언어인 JavaScript를 통해 페이지의 내용을 동적으로 변경할 수 있게 해줍니다. 즉, DOM을 사용하면 자바스크립트를 통해 웹 페이지의 요소를 추가, 삭제, 수정할 수 있습니다.

예제

먼저 간단한 HTML 페이지를 만들어보겠습니다. 이 페이지는 버튼을 클릭하면 텍스트가 변경됩니다.

<script>
    // 버튼 클릭 시 텍스트를 변경하는 함수
    const changeText = () => {
        const title = document.getElementById('title');
        title.textContent = 'DOM을 통해 텍스트가 변경되었습니다!';
    };
    // 버튼 클릭 이벤트 리스너 등록
    document.getElementById('changeText').addEventListener('click', changeText);
</script>

실습

위 코드를 수정하여, 버튼 클릭 시 배경색도 변경해 보세요.

응용

이제 여러분은 DOM의 기본적인 조작 방법을 배웠습니다. 여러 개의 버튼을 만들고 각 버튼에 다른 텍스트로 변경하는 기능을 추가해 보세요.

정리

DOM은 웹 페이지의 구조를 조작할 수 있는 중요한 개념입니다. 이번 강의를 통해 DOM을 조작하는 기본 방법을 이해하셨기를 바랍니다.