HTML DOMのheadプロパティは、HTMLの要素に関連付けられています。 要素を返すために使用されます。複数のヘッド要素がある場合は、最初のヘッド要素を返します。読み取り専用のプロパティです。
構文
以下は、headプロパティの構文です-
document.head
例
HTMLDOMヘッドプロパティの例を見てみましょう-
<!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> 出力
これにより、次の出力が生成されます-
「タイトルを取得」ボタンをクリックすると-
上記の例では-
最初に、このWebページのタイトルを指定する
要素を含む<head>要素を作成しました-</P> <pre><head>
<title>My title</title>
</head></pre> <p>
次に、ユーザーがクリックしたときにgetTitle（）メソッドを実行するボタン「GetTitle」を作成します。</P> <pre><button onclick="getTitle()">Get Title</button></pre> <p>
getTitle（）メソッドは、ドキュメントのheadプロパティを使用してhead要素を取得し、firstElementChildプロパティを使用して最初の子要素（この場合は<title>要素）を取得します。</P> <p>
次に、title要素でinnerHTMLプロパティを使用してその中のテキストを取得し、innerHTMLプロパティ-</P>を使用してIDが「Sample」の段落に表示します。 <pre>function getTitle() {
var x = document.head.firstElementChild.innerHTML;
document.getElementById("Sample").innerHTML = "The title of this document is: "+x;
}</pre> <br>
</div>
<div class="ad5"><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4480737146802772" crossorigin="anonymous"></script> <!-- jp.wsxdn 2 --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-4480737146802772" data-ad-slot="2397329591" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> adsbygoogle = window.adsbygoogle || [].push{}; </script></div>
<div id="turn-page" class="f-between">
<div class="page up f-align">
<i class="prev"></i>
<a class='LinkPrevArticle' href='https://jp.wsxdn.com/pn014i/ay151t/1001064877.html' >HTMLDOMヘッダーオブジェクト </a>
</div>
<div class="page down f-align">
<a class='LinkNextArticle' href='https://jp.wsxdn.com/pn014i/ay151t/1001064879.html' >HTML DOM HashChangeEvent </a>
<i class="next"></i>
</div>
</div>
<section class="bottom-list">
<ol>
<li class="f-between">
<div>
<a href="https://jp.wsxdn.com/pn014i/ay151t/1001065365.html" class="t-over" title="HTMLDOMタイトルテキストプロパティ ">
<span>HTMLDOMタイトルテキストプロパティ </span>
</a>
<p class="r-over r-over-3">
HTML DOM Title textプロパティは、ドキュメントの要素の値を設定/返します。 以下は構文です- 文字列値を返す titleElementObject.text テキストを設定する 文字列値に titleElementObject.text = string タイトルテキストの例を見てみましょう プロパティ- 例 <!DOCTYPE html>
<html>
<head>
<title id="titleSelect">HTML DOM Title text</title>
<style </p>
</div>
</li>
<li class="f-between">
<div>
<a href="https://jp.wsxdn.com/pn014i/ay151t/1001065366.html" class="t-over" title="HTMLDOMタイトルプロパティ ">
<span>HTMLDOMタイトルプロパティ </span>
</a>
<p class="r-over r-over-3">
HTML DOM titleプロパティは、HTML要素のtitle属性の値に対応する文字列を返す/設定します。 HTML要素にカーソルを合わせると、タイトルの値が表示されます。 以下は構文です- 文字列値を返す ElementOfHTMLObject.title タイトルを設定する 文字列値に ElementOfHTMLObject.title = string 例 HTMLDOMタイトルの例を見てみましょう プロパティ- <!DOCTYPE html>
<html>
<head>
<title>HTML DOM title</ti </p>
</div>
</li>
</ol>
</section>
</article>
<aside class="box1-r box4-r">
<section class="small-nav">
<ul class="f-between">
<li><a class='childclass' href='https://jp.wsxdn.com/pn014i/gd144y/' target="_self">Cプログラミング</a></li>
<li><a class='childclass' href='https://jp.wsxdn.com/pn014i/qo145i/' target="_self">C ++</a></li>
<li><a class='childclass' href='https://jp.wsxdn.com/pn014i/jh146b/' target="_self">Redis</a></li>
<li><a class='childclass' href='https://jp.wsxdn.com/pn014i/hf147z/' target="_self">BASHプログラミング</a></li>
<li><a class='childclass' href='https://jp.wsxdn.com/pn014i/mk148e/' target="_self">Python</a></li>
<li><a class='childclass' href='https://jp.wsxdn.com/pn014i/lj149d/' target="_self">Java</a></li>
<li><a class='childclass' href='https://jp.wsxdn.com/pn014i/ay150s/' target="_self">データベース</a></li>
<li><a class='childclass' href='https://jp.wsxdn.com/pn014i/ay151t/' target="_self">HTML</a></li>
<li><a class='childclass' href='https://jp.wsxdn.com/pn014i/pn152h/' target="_self">Javascript</a></li>
<li><a class='childclass' href='https://jp.wsxdn.com/pn014i/jh153b/' target="_self">プログラミング</a></li>
<li><a class='childclass' href='https://jp.wsxdn.com/pn014i/if154a/' target="_self">CSS</a></li>
<li><a class='childclass' href='https://jp.wsxdn.com/pn014i/ig155a/' target="_self">Ruby</a></li>
<li><a class='childclass' href='https://jp.wsxdn.com/pn014i/jg156b/' target="_self">SQL</a></li>
<li><a class='childclass' href='https://jp.wsxdn.com/pn014i/ig157b/' target="_self">IOS</a></li>
<li><a class='childclass' href='https://jp.wsxdn.com/pn014i/wu158p/' target="_self">Android</a></li>
<li><a class='childclass' href='https://jp.wsxdn.com/pn014i/ge159z/' target="_self">MongoDB</a></li>
<li><a class='childclass' href='https://jp.wsxdn.com/pn014i/jh160b/' target="_self">MySQL</a></li>
<li><a class='childclass' href='https://jp.wsxdn.com/pn014i/ec161w/' target="_self">C＃</a></li>
<li><a class='childclass' href='https://jp.wsxdn.com/pn014i/gd165y/' target="_self">PHP</a></li>
<li><a class='childclass' href='https://jp.wsxdn.com/pn014i/ig171a/' target="_self">SQL Server</a></li>
</ul>
</section>
<div class="box1-r-list">
<div>
<i></i>
<span>HTML</span>
</div>
<ol>
<li class="f-start">
<em></em>
<a href="https://jp.wsxdn.com/pn014i/ay151t/1001064411.html" class="r-over r-over-2" title="HTMLDOMaccessKeyプロパティ ">HTMLDOMaccessKeyプロパティ </a>
</li>
<li class="f-start">
<em></em>
<a href="https://jp.wsxdn.com/pn014i/ay151t/1001064427.html" class="r-over r-over-2" title="HTMLDOMinnerHTMLプロパティ ">HTMLDOMinnerHTMLプロパティ </a>
</li>
<li class="f-start">
<em></em>
<a href="https://jp.wsxdn.com/pn014i/ay151t/1001064428.html" class="r-over r-over-2" title="HTMLDOMidプロパティ ">HTMLDOMidプロパティ </a>
</li>
<li class="f-start">
<em></em>
<a href="https://jp.wsxdn.com/pn014i/ay151t/1001064550.html" class="r-over r-over-2" title="HTMLDOMpreviousElementSiblingプロパティ ">HTMLDOMpreviousElementSiblingプロパティ </a>
</li>
<li class="f-start">
<em></em>
<a href="https://jp.wsxdn.com/pn014i/ay151t/1001064551.html" class="r-over r-over-2" title="HTMLDOMpreviousSiblingプロパティ ">HTMLDOMpreviousSiblingプロパティ </a>
</li>
<li class="f-start">
<em></em>
<a href="https://jp.wsxdn.com/pn014i/ay151t/1001064553.html" class="r-over r-over-2" title="HTMLDOMscrollTopプロパティ ">HTMLDOMscrollTopプロパティ </a>
</li>
<li class="f-start">
<em></em>
<a href="https://jp.wsxdn.com/pn014i/ay151t/1001064554.html" class="r-over r-over-2" title="HTMLDOMscrollLeftプロパティ ">HTMLDOMscrollLeftプロパティ </a>
</li>
<li class="f-start">
<em></em>
<a href="https://jp.wsxdn.com/pn014i/ay151t/1001064558.html" class="r-over r-over-2" title="HTMLDOMownerDocumentプロパティ ">HTMLDOMownerDocumentプロパティ </a>
</li>
<li class="f-start">
<em></em>
<a href="https://jp.wsxdn.com/pn014i/ay151t/1001064709.html" class="r-over r-over-2" title="HTMLDOMinputEncodingプロパティ ">HTMLDOMinputEncodingプロパティ </a>
</li>
<li class="f-start">
<em></em>
<a href="https://jp.wsxdn.com/pn014i/ay151t/1001064719.html" class="r-over r-over-2" title="HTMLDOMisContentEditableプロパティ ">HTMLDOMisContentEditableプロパティ </a>
</li>
</ol>
</div>
</aside>
</section>
<footer>
<section>
<span class="container f-center">
著作権 ©
<a href="https://jp.wsxdn.com">https://jp.wsxdn.com</a>
全著作権所有
</span>
</section>
</footer>
</body>
</html> 