<시간/>
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> 요소를 만들었습니다. </P> <pre><head>
<title>My title</title>
</head></pre> <p>
그런 다음 사용자가 클릭할 때 getTitle() 메서드를 실행하는 "제목 가져오기" 버튼을 만듭니다.</P> <pre><button onclick="getTitle()">Get Title</button></pre> <p>
getTitle() 메서드는 문서 head 속성을 사용하여 head 요소를 가져오고 firstElementChild 속성을 사용하여 이 경우 <title> 요소인 첫 번째 자식 요소를 가져옵니다.</P> <p>
그런 다음 title 요소의 innerHTML 속성을 사용하여 그 안의 텍스트를 가져오고 innerHTML 속성을 사용하여 ID가 "Sample"인 단락에 표시합니다. -</P> <pre>function getTitle() {
var x = document.head.firstElementChild.innerHTML;
document.getElementById("Sample").innerHTML = "The title of this document is: "+x;
}</pre> <br>
</article>
<div class="ad5">
<script language='javascript' src='https://kr.wsxdn.com/css/ad/kr2.js'></script>
</div>
<div id="turn-page" class="text-over">
<a class='LinkPrevArticle' href='https://kr.wsxdn.com/bz024t/hf251z/1002064877.html' >HTML DOM 헤더 객체 </a>
<a class='LinkNextArticle' href='https://kr.wsxdn.com/bz024t/hf251z/1002064879.html' >HTML DOM 해시 변경 이벤트 </a>
</div>
</section>
<aside class="box-r box4-r">
<h3>HTML</h3>
<ul>
<li>
<a href="https://kr.wsxdn.com/bz024t/hf251z/1002064411.html" class="f-start">
<em></em>
<p class="r-over r-over-2" title="HTML DOM accessKey 속성 ">HTML DOM accessKey 속성 </p>
</a>
</li><li>
<a href="https://kr.wsxdn.com/bz024t/hf251z/1002064427.html" class="f-start">
<em></em>
<p class="r-over r-over-2" title="HTML DOM innerHTML 속성 ">HTML DOM innerHTML 속성 </p>
</a>
</li><li>
<a href="https://kr.wsxdn.com/bz024t/hf251z/1002064428.html" class="f-start">
<em></em>
<p class="r-over r-over-2" title="HTML DOM ID 속성 ">HTML DOM ID 속성 </p>
</a>
</li><li>
<a href="https://kr.wsxdn.com/bz024t/hf251z/1002064550.html" class="f-start">
<em></em>
<p class="r-over r-over-2" title="HTML DOM 이전ElementSibling 속성 ">HTML DOM 이전ElementSibling 속성 </p>
</a>
</li><li>
<a href="https://kr.wsxdn.com/bz024t/hf251z/1002064551.html" class="f-start">
<em></em>
<p class="r-over r-over-2" title="HTML DOM 이전Sibling 속성 ">HTML DOM 이전Sibling 속성 </p>
</a>
</li>
</ul>
<h3 class="h3-2">컴퓨터</h3>
<ul>
<li>
<a href="https://kr.wsxdn.com/bz024t/hf251z/1002064553.html" class="f-start">
<em></em>
<p class="r-over r-over-2" title="HTML DOM scrollTop 속성 ">HTML DOM scrollTop 속성 </p>
</a>
</li>
<li>
<a href="https://kr.wsxdn.com/bz024t/hf251z/1002064554.html" class="f-start">
<em></em>
<p class="r-over r-over-2" title="HTML DOM scrollLeft 속성 ">HTML DOM scrollLeft 속성 </p>
</a>
</li>
<li>
<a href="https://kr.wsxdn.com/bz024t/hf251z/1002064558.html" class="f-start">
<em></em>
<p class="r-over r-over-2" title="HTML DOM 소유자 문서 속성 ">HTML DOM 소유자 문서 속성 </p>
</a>
</li>
<li>
<a href="https://kr.wsxdn.com/bz024t/hf251z/1002064709.html" class="f-start">
<em></em>
<p class="r-over r-over-2" title="HTML DOM inputEncoding 속성 ">HTML DOM inputEncoding 속성 </p>
</a>
</li>
<li>
<a href="https://kr.wsxdn.com/bz024t/hf251z/1002064719.html" class="f-start">
<em></em>
<p class="r-over r-over-2" title="HTML DOM isContentEditable 속성 ">HTML DOM isContentEditable 속성 </p>
</a>
</li>
</ul>
</aside>
</section>
</div>
<ul class="types box4-1 container f-center">
<li><a class='childclass' href='https://kr.wsxdn.com/bz024t/ol244g/' target="_self">C 프로그래밍</a></li>
<li><a class='childclass' href='https://kr.wsxdn.com/bz024t/fd245y/' target="_self">C++</a></li>
<li><a class='childclass' href='https://kr.wsxdn.com/bz024t/xv246p/' target="_self">Redis</a></li>
<li><a class='childclass' href='https://kr.wsxdn.com/bz024t/ig247a/' target="_self">BASH 프로그래밍</a></li>
<li><a class='childclass' href='https://kr.wsxdn.com/bz024t/ge248y/' target="_self">Python</a></li>
<li><a class='childclass' href='https://kr.wsxdn.com/bz024t/jh249b/' target="_self">Java</a></li>
<li><a class='childclass' href='https://kr.wsxdn.com/bz024t/yw250q/' target="_self">데이터 베이스</a></li>
<li><a class='childclass' href='https://kr.wsxdn.com/bz024t/hf251z/' target="_self">HTML</a></li>
<li><a class='childclass' href='https://kr.wsxdn.com/bz024t/ig252a/' target="_self">JavaScript</a></li>
<li><a class='childclass' href='https://kr.wsxdn.com/bz024t/qo253i/' target="_self">프로그램 작성</a></li>
<li><a class='childclass' href='https://kr.wsxdn.com/bz024t/vs254n/' target="_self">CSS</a></li>
<li><a class='childclass' href='https://kr.wsxdn.com/bz024t/fd255x/' target="_self">Ruby</a></li>
<li><a class='childclass' href='https://kr.wsxdn.com/bz024t/ay256s/' target="_self">SQL</a></li>
<li><a class='childclass' href='https://kr.wsxdn.com/bz024t/yw257q/' target="_self">IOS</a></li>
<li><a class='childclass' href='https://kr.wsxdn.com/bz024t/wu258o/' target="_self">Android</a></li>
<li><a class='childclass' href='https://kr.wsxdn.com/bz024t/nl259f/' target="_self">MongoDB</a></li>
<li><a class='childclass' href='https://kr.wsxdn.com/bz024t/mk260e/' target="_self">MySQL</a></li>
<li><a class='childclass' href='https://kr.wsxdn.com/bz024t/ax261s/' target="_self">C＃</a></li>
<li><a class='childclass' href='https://kr.wsxdn.com/bz024t/bz265t/' target="_self">PHP</a></li>
<li><a class='childclass' href='https://kr.wsxdn.com/bz024t/zx271r/' target="_self">SQL Server</a></li>
</ul>
<footer>
<section class="container">
<div class="footer-msg">
<span class="container f-center">
<p class=krf>저작권 © <a href="https://kr.wsxdn.com">https://kr.wsxdn.com</a> 모든 권리 보유</p>
</span>
</div>
</section>
</footer>
</body>
</html>