HTML DOM documentElement 속성 완벽 정리 – 문서의 루트 요소 가져오기

HTML DOM의 documentElement 속성은 현재 문서의 최상위(root) 요소, 즉 문서 요소(document element)를 반환합니다. 반환되는 값의 타입은 Element 객체이며, HTML 문서에서 문서 요소는 항상 <html> 태그에 해당합니다. 이 속성은 읽기 전용(read-only)이므로 값을 직접 변경할 수 없습니다.

문법(Syntax)

documentElement 속성의 기본 문법은 다음과 같습니다.

document.documentElement

예제(Example)

아래 예제를 통해 documentElement 속성의 실제 동작을 확인해 보겠습니다.

<!DOCTYPE html>
<html>
<body>
<h1>documentElement 속성 예제</h1>
<p>아래 버튼을 클릭하면 문서 요소의 이름을 확인할 수 있습니다</p>
<button onclick="getDocument()">이름 가져오기</button>
<p id="Sample"></p>
<script>
    function getDocument() {
        var dName = document.documentElement.nodeName;
        document.getElementById("Sample").innerHTML = "이 문서의 문서 요소는: " + dName;
    }
</script>
</body>
</html>

실행 결과(Output)

위 코드를 실행하면 다음과 같은 화면이 출력됩니다.

HTML DOM documentElement 속성 완벽 정리 – 문서의 루트 요소 가져오기

버튼을 클릭한 후의 결과는 다음과 같습니다.

HTML DOM documentElement 속성 완벽 정리 – 문서의 루트 요소 가져오기

코드 분석

위 예제의 동작 원리를 단계별로 살펴보겠습니다.

1. 버튼 생성 및 이벤트 연결

먼저 클릭 시 getDocument() 함수를 실행하는 버튼을 만듭니다. onclick 속성을 통해 사용자가 버튼을 누르는 순간 함수가 호출됩니다.

<button onclick="getDocument()">이름 가져오기</button>

2. 문서 요소 이름 가져오기

getDocument() 함수 내부에서는 documentElement 속성으로 문서의 루트 요소에 접근한 뒤, nodeName 프로퍼티를 사용해 해당 요소의 이름(태그명)을 변수 dName에 저장합니다.

3. 결과 화면에 출력하기

마지막으로 innerHTML 속성을 활용해 id가 "Sample"인 단락(<p>)에 결과 텍스트를 삽입하여 사용자에게 보여줍니다.

function getDocument() {
    var dName = document.documentElement.nodeName;
    document.getElementById("Sample").innerHTML = "이 문서의 문서 요소는: " + dName;
}

정리

documentElement 속성은 언제나 문서의 루트인 <html> 요소를 가리키므로, DOM 트리를 순회하거나 전체 문서 구조에 접근해야 할 때 유용하게 활용할 수 있습니다. 특히 nodeName, tagName 등의 프로퍼티와 함께 사용하면 문서의 기본 정보를 손쉽게 확인할 수 있습니다.