HTML DOM에서 HTML 객체(HTML Object)는 HTML 문서의 최상위 요소인 <html> 태그를 나타냅니다. 자바스크립트를 사용하면 이 객체에 접근하여 문서 전체의 내용을 읽거나 조작할 수 있습니다.
HTML 객체에 접근하는 방법
HTML 객체는 다음과 같은 문법을 통해 접근할 수 있습니다.
문법(Syntax)
document.getElementsByTagName("HTML")getElementsByTagName() 메서드는 태그 이름이 일치하는 모든 요소를 NodeList 형태로 반환합니다. HTML 문서에는 <html> 태그가 하나만 존재하므로, 인덱스 [0]을 사용해 해당 요소에 접근합니다.
HTML 객체 예제
아래 예제는 버튼을 클릭하면 <html> 태그 내부의 모든 내용을 가져와 화면에 출력하는 코드입니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<style>
body{
text-align:center;
}
.btn{
background-color:lightblue;
border:none;
height:2rem;
border-radius:50px;
width:60%;
margin:1rem auto;
}
.show{
font-size:1rem;
font-weight:bold;
color:orange;
border:2px solid green;
padding:10px;
display:none;
}
</style>
</head>
<body>
<h1>DOM HTML Object Example</h1>
<button type="button" onclick="getContent()" class="btn">Click me to get content inside HTML tag</button>
<div class="show"></div>
<script>
function getContent(){
var content=document.getElementsByTagName("HTML")[0].innerHTML;
document.querySelector(".show").innerHTML = content;
document.querySelector(".show").style.display = "block";
}
</script>
</body>
</html>코드 설명
getContent()함수는 버튼이 클릭될 때 실행됩니다.document.getElementsByTagName("HTML")[0]으로 문서의<html>요소를 선택한 뒤,innerHTML속성으로 내부의 모든 마크업을 가져옵니다.- 가져온 내용은
.show클래스를 가진 div 요소에 삽입되고,display스타일이block으로 변경되어 화면에 표시됩니다.
실행 결과(Output)
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
파란색 버튼을 클릭하면 해당 페이지의 <html> 태그 내부에 있는 모든 콘텐츠가 아래 영역에 표시됩니다.
마무리
이처럼 HTML DOM의 HTML 객체를 활용하면 문서 전체 구조에 손쉽게 접근할 수 있습니다. getElementsByTagName() 외에도 document.documentElement 속성을 사용하면 더 간결하게 <html> 요소에 접근할 수 있으니 함께 참고하시기 바랍니다.