HTML DOM 헤드 속성은 HTML
요소와 연결됩니다. 요소를 반환하는 데 사용됩니다. 여러 헤드 요소가 있는 경우 첫 번째 헤드 요소를 반환합니다. 읽기 전용 속성입니다.구문
다음은 head 속성의 구문입니다 -
document.head
예시
HTML DOM 헤드 속성에 대한 예를 살펴보겠습니다 -
<!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>
출력
이것은 다음과 같은 출력을 생성합니다 -
"제목 가져오기" 버튼 클릭 시 -
위의 예에서 -
먼저 이 웹 페이지의 제목을 지정하는
<head> <title>My title</title> </head>
그런 다음 사용자가 클릭할 때 getTitle() 메서드를 실행하는 "제목 가져오기" 버튼을 만듭니다.
<button onclick="getTitle()">Get Title</button>
getTitle() 메서드는 문서 head 속성을 사용하여 head 요소를 가져오고 firstElementChild 속성을 사용하여 이 경우
그런 다음 title 요소의 innerHTML 속성을 사용하여 그 안의 텍스트를 가져오고 innerHTML 속성을 사용하여 ID가 "Sample"인 단락에 표시합니다. -
function getTitle() { var x = document.head.firstElementChild.innerHTML; document.getElementById("Sample").innerHTML = "The title of this document is: "+x; }