HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOM headプロパティとは？構文と使い方をわかりやすく解説

HTML DOM の head プロパティは、HTML の <head> 要素に関連付けられたプロパティです。このプロパティを使うことで、現在のドキュメント内にある <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>

実行結果

上記のコードを実行すると、次のような画面が表示されます。

HTML DOM headプロパティとは？構文と使い方をわかりやすく解説

「Get Title」ボタンをクリックすると、以下のようにドキュメントのタイトルが表示されます。

HTML DOM headプロパティとは？構文と使い方をわかりやすく解説

コードの解説

上記の例では、次のような処理が行われています。

まず、<head> 要素を作成し、その内部に <title> 要素を配置しています。この <title> 要素には、Web ページのタイトルとして「My title」が指定されています。

<head>
<title>My title</title>
</head>

続いて、「Get Title」というボタンを用意します。ユーザーがこのボタンをクリックすると、getTitle() 関数が呼び出される仕組みです。

<button onclick="getTitle()">Get Title</button>

getTitle() 関数の中では、document.head プロパティによって <head> 要素を取得し、さらに firstElementChild プロパティを使ってその最初の子要素（この例では <title> 要素）を取得しています。

最後に、<title> 要素に対して innerHTML プロパティを適用することでタイトルのテキスト内容を取り出し、id が「Sample」の段落要素の innerHTML に代入することで、画面上に結果を表示しています。

function getTitle() {
    var x = document.head.firstElementChild.innerHTML;
    document.getElementById("Sample").innerHTML = "The title of this document is: "+x;
}

押さえておきたいポイント

  • document.head は読み取り専用のプロパティであり、値の書き換えはできません。
  • head 要素が複数存在する場合でも、返されるのは常に最初の要素だけです。
  • Chrome、Firefox、Safari、Edge など、主要なブラウザすべてでサポートされています。
  • <body> 要素を取得したい場合は、同じように document.body を使うと便利です。
  1. HTML DOMのTitle textプロパティとは？使い方とサンプルコードを解説

    HTML DOM の text プロパティは、ドキュメント内の <title> 要素が持つテキスト（タイトル文字列）を取得、または設定するために使用されます。このプロパティを活用することで、JavaScript からページタイトルを動的に読み取ったり変更したりすることが可能になります。 構文（シンタックス） テキスト値を取得する場合 titleElementObject.text テキスト値を文字列として設定する場合 titleElementObject.text = string 設定できる値は文字列のみです。指定した文字列がブラウザのタブやお気に入りに表示されるページタイトルと

  2. HTML DOM titleプロパティとは？使い方とサンプルコードを解説

    HTML DOM titleプロパティとはHTML DOMのtitleプロパティは、HTML要素のtitle属性に対応する文字列を取得（戻り値として返す）したり、設定したりするためのプロパティです。title属性に値が設定されている場合、その要素にマウスカーソルを重ねると、ツールチップとしてテキストが表示されます。この動的な挙動をJavaScriptから制御できるのが、titleプロパティの役割です。構文title属性の値を取得する場合：ElementOfHTMLObject.titletitle属性に文字列を設定する場合：ElementOfHTMLObject.title = string使