JavaScript에서 document.documentElement 속성을 사용하는 방법

document.documentElement란?

JavaScript에서 document.documentElement 속성을 사용하면 현재 문서의 루트 요소(documentElement), 즉 <html> 태그에 직접 접근할 수 있습니다. 이 속성을 활용하면 루트 요소의 노드 이름(nodeName)을 비롯해 다양한 DOM 정보를 손쉽게 확인할 수 있습니다.

예제

다음 코드를 실행하면 document.documentElement 속성이 실제로 어떻게 동작하는지 확인할 수 있습니다.

<!DOCTYPE html>
<html>
   <head>
      <title>JavaScript Example</title>
   </head>
   
   <body>
      <p>Demo Text</p>
      
      <script>
         document.body.style.backgroundColor = "gray";
         var a = document.documentElement.nodeName;
         document.write("Node Name: "+a);
      </script>
      
   </body>
</html>

실행 결과

위 예제를 실행하면 화면에 다음과 같이 출력됩니다.

Node Name: HTML

코드 설명

document.body.style.backgroundColor = "gray"; — 페이지의 배경색을 회색으로 변경합니다.
document.documentElement.nodeName — 문서의 루트 요소인 <html>의 노드 이름("HTML")을 반환합니다.
document.write() — 결과를 화면에 출력합니다.

이처럼 document.documentElement는 문서 전체의 최상위 요소를 다룰 때 유용하게 사용되며, 스크롤 위치 제어나 루트 수준의 스타일 변경 등 다양한 작업에도 활용할 수 있습니다.