HTML DOM의 body 속성은 HTML <body> 요소와 연관된 속성으로, <body> 요소의 값을 설정하거나 반환하는 데 사용됩니다. 이 속성은 <body> 요소 자체를 반환하며, 이를 활용하면 <body> 요소 내부의 콘텐츠를 자유롭게 변경할 수 있습니다. 또한 기존에 <body> 안에 존재하던 자식 요소들의 내용을 통째로 덮어쓸 수도 있습니다.
문법(Syntax)
body 속성을 설정하는 기본 문법은 다음과 같습니다.
document.body = New_Content
여기서 New_Content는 해당 요소에 새로 지정할 콘텐츠를 의미합니다.
예제
HTML DOM body 속성의 동작 방식을 확인할 수 있는 간단한 예제를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<body>
<h2>Sample HEADING</h2>
<p>아래 버튼을 클릭하면 자식 콘텐츠가 덮어써집니다</p>
<button onclick="OverWrite()">Overwrite Content</button>
<p>샘플 단락입니다</p>
<script>
function OverWrite() {
document.body.innerHTML = "body 태그 안의 모든 콘텐츠가 덮어써졌습니다";
}
</script>
</body>
</html>
실행 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
"Overwrite Content" 버튼을 클릭하면 아래와 같이 화면이 변경됩니다.
예제 설명
위 예제의 <body> 요소 안에는 <h2> 요소 하나, <p> 요소 두 개, 그리고 버튼 하나가 포함되어 있습니다. "Overwrite Content" 버튼을 클릭하면 OverWrite() 함수가 실행됩니다.
<button>Overwrite Content</button>
OverWrite() 함수는 document.body의 innerHTML에 접근하여 텍스트를 "body 태그 안의 모든 콘텐츠가 덮어써졌습니다"로 변경합니다. 이 과정에서 <body> 내부의 모든 자식 요소가 제거되고, 오직 해당 텍스트만 화면에 표시됩니다.
function OverWrite() {
document.body.innerHTML = "body 태그 안의 모든 콘텐츠가 덮어써졌습니다";
}
마무리 정리
document.body 속성은 웹 페이지의 전체 본문 영역에 직접 접근할 수 있는 강력한 도구입니다. 다만 innerHTML로 내용을 덮어쓸 경우 기존의 모든 자식 요소와 함께 등록되어 있던 이벤트 리스너까지 사라지기 때문에, 실무에서는 필요한 경우에만 신중하게 사용하는 것이 좋습니다.