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

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メソッドのように添字は必要ありません。

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

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