HTML DOM Body 객체 완벽 정리: 주요 속성과 동적 생성 예제

HTML DOM Body 객체는 HTML <body> 요소와 연결된 객체입니다. <body> 태그 안에 설정된 속성과 값은 자식 노드에 의해 재정의되지 않는 한 HTML 문서 전체에 걸쳐 유지됩니다. Body 객체를 활용하면 이러한 속성과 값에 접근하거나 직접 조작할 수 있습니다.

Body 객체의 주요 속성

HTML DOM Body 객체에서 제공하는 속성은 다음과 같습니다.

참고: 아래 속성들은 HTML5에서 더 이상 지원되지 않습니다. 대신 CSS를 사용하는 것이 권장됩니다.

속성	설명
aLink	문서에서 활성화된 링크(active link)의 색상을 설정하거나 반환합니다.
background	문서의 배경 이미지를 설정하거나 반환합니다.
bgColor	문서의 배경색을 설정하거나 반환합니다.
link	문서에서 방문하지 않은 링크의 색상을 설정하거나 반환합니다.
text	문서의 텍스트 색상을 설정하거나 반환합니다.
vLink	문서에서 방문한 적이 있는 링크의 색상을 설정하거나 반환합니다.

문법(Syntax)

Body 객체를 새로 생성하는 기본 문법은 다음과 같습니다.

var x = document.createElement("BODY");

예제

HTML DOM Body 객체의 실제 사용 예를 살펴보겠습니다.

<!DOCTYPE html>
<html>
<head>
<title>aside tag</title>
<h2>HTML DOM BODY OBJECT</h2>
<button onclick="createBody()">CREATE</button>
<script>
    function createBody() {
        var x = document.createElement("BODY");
        x.setAttribute("id", "myBody");
        document.body.appendChild(x);
        var Para = document.createElement("P");
        var text = document.createTextNode("A sample paragraph created as child of body");
        Para.appendChild(text);
        document.getElementById("myBody").appendChild(Para);
    }
</script>
</head>
</html>

실행 결과

위 코드를 실행하면 다음과 같은 화면이 나타납니다.

HTML DOM Body 객체 완벽 정리: 주요 속성과 동적 생성 예제

CREATE 버튼을 클릭하면 아래와 같이 변경됩니다.

HTML DOM Body 객체 완벽 정리: 주요 속성과 동적 생성 예제

예제 코드 분석

위 예제의 동작 과정을 단계별로 살펴보겠습니다.

먼저, 클릭 시 createBody() 함수를 호출하는 CREATE 버튼을 만듭니다.

<button onclick="createBody()">CREATE</button>

createBody() 함수는 document.createElement("BODY")로 <body> 요소를 생성하여 변수 x에 할당합니다. 이어서 setAttribute() 메서드로 해당 body 요소의 id를 "myBody"로 지정하고, appendChild() 메서드를 사용해 문서의 자식으로 추가합니다.

그다음에는 <p>(단락) 요소를 하나 더 생성하고, "A sample paragraph created as child of body"라는 텍스트 노드를 만들어 단락의 자식으로 붙입니다. 마지막으로 <body> 요소의 id를 이용해 해당 단락을 body 안에 추가함으로써 전체 작업이 완료됩니다.

function createBody() {
    var x = document.createElement("BODY");
    x.setAttribute("id", "myBody");
    document.body.appendChild(x);
    var Para = document.createElement("P");
    var text = document.createTextNode("A sample paragraph created as child of body");
    Para.appendChild(text);
    document.getElementById("myBody").appendChild(Para);
}