HTML DOM의 head 속성은 HTML <head> 요소와 관련된 속성으로, 현재 문서의 <head> 요소를 반환하는 데 사용됩니다. 만약 문서 내에 여러 개의 head 요소가 존재한다면 첫 번째 head 요소를 반환합니다. 또한 이 속성은 읽기 전용(read-only)이므로 직접 값을 수정할 수 없습니다.
구문
head 속성의 기본적인 사용 구문은 다음과 같습니다.
document.head
예제
HTML DOM head 속성의 실제 동작을 확인할 수 있는 예제를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<head>
<title>My title</title>
</head>
<body>
<h1>head property example</h1>
<p>Get this document title by clicking on the below button</p>
<button onclick="getTitle()">Get Title</button>
<p id="Sample"></p>
<script>
function getTitle() {
var x = document.head.firstElementChild.innerHTML;
document.getElementById("Sample").innerHTML = "The title of this document is: "+x;
}
</script>
</body>
</html>
실행 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
"Get Title" 버튼을 클릭하면 아래와 같이 해당 문서의 제목이 화면에 표시됩니다.
코드 상세 설명
위 예제의 동작 과정을 단계별로 살펴보겠습니다.
먼저 웹 페이지의 제목을 지정하는 <title> 요소를 포함하는 <head> 요소를 생성합니다.
<head> <title>My title</title> </head>
그다음, 사용자가 클릭하면 getTitle() 함수를 실행하는 "Get Title" 버튼을 만듭니다.
<button onclick="getTitle()">Get Title</button>
getTitle() 함수는 document 객체의 head 속성을 사용하여 head 요소에 접근한 뒤, firstElementChild 속성을 통해 그 첫 번째 자식 요소를 가져옵니다. 이 예제에서는 <title> 요소가 head의 첫 번째 자식 요소에 해당합니다.
마지막으로 innerHTML 속성을 활용해 title 요소 내부의 텍스트를 추출하고, id가 "Sample"인 단락(<p>) 요소의 innerHTML에 결과 문자열을 삽입하여 사용자에게 제목을 보여줍니다.
function getTitle() {
var x = document.head.firstElementChild.innerHTML;
document.getElementById("Sample").innerHTML = "The title of this document is: "+x;
}
참고: document.head 속성은 Chrome, Firefox, Safari, Edge 등 모든 최신 브라우저에서 폭넓게 지원되므로 호환성 걱정 없이 안전하게 사용할 수 있습니다.