JavaScript

最終更新日:
公開日:

レシピ

HTML・DOM

html要素、head要素、body要素を取得する

ページのルート要素となるhtml要素head要素body要素を取得して編集する方法を解説します。

この記事のポイント

  • getElementsByTagNameメソッドquerySelectorメソッドを使って取得する
  • head要素body要素document.headdocument.bodyからも取得できる
  • 他のHTML要素と同様にsetAttributeメソッドで属性を設定できる

HTMLのルートになる要素を取得する

ページのHTMLは文法上、html要素head要素body要素が必ず1つずつ含まれています。
この3つのHTML要素はページの基幹になりますが、他のHTML要素と同様にgetElementsByTagNameメソッドquerySelectorメソッドを使って取得し、編集することが可能です。
また、head要素body要素については、Documentオブジェクトの読み取り専用プロパティであるheadプロパティbodyプロパティから取得することも可能です。

以下の例ではgetElementsByTagNameメソッドを使って3つのHTML要素を取得し、setAttributeメソッドで属性を設定します。

コード例

// html要素
let html_element = document.getElementsByTagName('html');
html_element[0].setAttribute('lang','en');

// head要素
let head_element = document.getElementsByTagName('head');
head_element[0].setAttribute('title','head');

// body要素
et body_element = document.getElementsByTagName('body');
body_element[0].setAttribute('title','body');

getElementsByTagNameメソッドの戻り値は配列形式になるため、たとえ取得するHTML要素が1つだったとしても「html_element[0]」のように添字が必要となります。

head要素body要素Documentオブジェクトheadプロパティbodyプロパティから取得することでよりシンプルに置き換えることもできます。

コード例

// head要素
let head_element = document.head;
head_element.setAttribute('title','head2');

// body要素
let body_element = document.body;
body_element.setAttribute('title','body2');

もう1つのパターンとして、querySelectorメソッドに置き換えたコードも紹介します。
やっている内容は上記のものと同じです。

コード例

// html要素
let html_element = document.querySelector('html');
html_element.setAttribute('lang','fr');

// head要素
let head_element = document.querySelector('html head');
head_element.setAttribute('title','head3');

// body要素
let body_element = document.querySelector('html body');
body_element.setAttribute('title','body3');

querySelectorメソッドは取得するHTML要素が1つと決まっているため、getElementsByTagNameメソッドのように添字は必要ありません。

こちらの記事は役に立ちましたか?

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

コメントありがとうございます!
運営の参考にさせていただきます。