JavaScript document.body 속성 사용법 – 문서의 body 요소에 접근하는 방법

JavaScript에서 document.body 속성을 사용하면 현재 문서의 <body> 태그, 즉 문서 본문(body) 요소에 직접 접근할 수 있습니다.

이 속성은 DOM(Document Object Model)에서 가장 자주 사용되는 속성 중 하나로, 배경색 변경과 같은 스타일 조작부터 새로운 요소 추가까지 다양한 작업에 활용됩니다.

document.body 주요 활용 예시

스타일 변경: 페이지 전체의 배경색, 글꼴 등 스타일을 동적으로 수정할 수 있습니다.
요소 추가: appendChild() 메서드와 함께 사용하여 body에 새로운 HTML 요소를 동적으로 삽입할 수 있습니다.
클래스 제어: classList를 통해 body에 클래스를 추가하거나 제거하여 테마 전환 등을 구현할 수 있습니다.

예제 코드

아래 예제는 document.body 속성을 사용하여 페이지의 배경색을 파란색으로 변경하는 코드입니다. 코드를 실행하면 body 요소의 스타일이 즉시 적용되는 것을 확인할 수 있습니다.

<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript Example</title>
    </head>
    <body>
        <p>데모 텍스트</p>
        <script>
            document.body.style.backgroundColor = "blue";
        </script>
    </body>
</html>

코드 설명

위 코드에서 document.body.style.backgroundColor = "blue"; 구문은 다음과 같이 동작합니다.

document.body: 현재 문서의 <body> 요소를 반환합니다.
.style: 해당 요소의 인라인 스타일 객체에 접근합니다.
.backgroundColor = "blue": 배경색을 파란색으로 설정합니다.

이처럼 document.body 속성은 웹 페이지의 본문 영역을 자바스크립트로 제어하는 기본적인 출발점이 되며, 동적이고 인터랙티브한 웹 페이지를 만들 때 필수적으로 사용됩니다.