JavaScript

レシピ

HTML・DOM

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

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

この記事のポイント

  • getElementsByTagNameメソッドquerySelectorメソッドを使って取得する
  • 他のHTML要素と同様にsetAttributeメソッドで属性を設定できる

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

ページのHTMLは文法上、html要素head要素body要素が必ず1つずつ含まれています。
この3つのHTML要素はページの基幹になりますが、他のHTML要素と同様にgetElementsByTagNameメソッドquerySelectorメソッドを使って取得し、編集することが可能です。

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

HTMLコード例

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

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

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

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

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

HTMLコード例

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

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

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

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

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

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

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