documentelementとは？初心者でも分かる使い方と実例共起語・同意語・対義語も併せて解説！

この記事を書いた人

高岡智則

年齢：33歳性別：男性職業：Webディレクター（兼ライティング・SNS運用担当）居住地：東京都杉並区・永福町の1LDKマンション出身地：神奈川県川崎市身長：176cm 体系：細身〜普通（最近ちょっとお腹が気になる）血液型：A型誕生日：1992年11月20日最終学歴：明治大学・情報コミュニケーション学部卒通勤：京王井の頭線で渋谷まで（通勤20分）家族構成：一人暮らし、実家には両親と2歳下の妹恋愛事情：独身。彼女は2年いない（本人は「忙しいだけ」と言い張る）

documentelementとは？基本の解説

ウェブサイトを作るとき、documentelement はよく出てくる用語です。初心者には難しく思えるかもしれませんが、実はとても簡単な仕組みの名前です。この用語は「ドキュメントの根本の要素」を指します。つまり、HTML文書の最上位にある要素、普段は<html>タグそのものを表します。

この項目を理解すると、ウェブページの構造を読み解く助けになります。ここでは、documentelement が何を意味するのか、どんな場面で使われるのか、そしてどう安全に使うのかを、やさしく解説します。

documentelementが指すもの

通常、HTML文書には<html>タグがあり、その中に<head>と<body>が入っています。documentを表すオブジェクトには、文書のルート要素を指すプロパティがあります。そのプロパティが documentElement です。HTML文書では、document.documentElement は要素を返します。

この情報を使うと、ページの全体のサイズやスタイルの調整を、ページ全体の根元から統一的に操作できます。

実際の使い方の例

以下は実務でよく使われる基本的な例です。コードはテキストとして表示しておきますので、実際に動かすときはご自分の環境で試してみてください。

const root = document.documentElement;

console.log(root); // HTML のルート要素を表示

const height = document.documentElement.scrollHeight;

console.log(height);

このように document.documentElement は、その文書のルート要素を参照することで、ページ全体の情報にアクセスする入口となります。特に跨ブラウザ対応の場面で、body だけに頼らず root 要素を使うと、安定した動作を得やすくなります。

documentElement と body の違い

次の2つの要素は、よく混同されがちですが役割が異なります。documentElement は HTML の根幹要素であり、body は実際に画面に表示される内容を含む要素です。スクロール量や高さを取得する際、古いブラウザや特定の状況では document.body に対して読み取る方が適切な場合もありますが、現代の実装では document.documentElement を使う場面が多くなっています。

実務での注意点

要点をまとめると、documentelement は「根元の要素を指す名詞」だと覚えましょう。タグ名そのものではなく、JavaScript でその要素を参照するためのプロパティ名です。コードを書くときは、動作を確認しながら document.documentElement と document.body の双方を比較して、目的に合った要素を選ぶと安全です。

インデックス表: documentelement のポイント

<th>要素

特徴
document.documentElement	HTML の根要素であり、<html>を表す。
document.body	表示される内容を含む要素で、ページの本体を指す場合が多い。
使い方のコツ	跨ブラウザ対応のときは document.documentElement を基準にする

この項目を読み終えるころには、documentelement の基本的な意味と、どんな場面で使うのかが分かるはずです。ウェブ制作の初歩として、根元の考え方を押さえておくと、後で他の DOM 操作にも自信をもって取り組めるようになります。

documentelementの同意語

ルート要素: 文書の階層構造の最上位に位置する要素。HTML文書では通常<html>要素を指す、ドキュメントの根本となる要素のこと。
根要素: 文書の根本を成す要素。データ構造の最上位要素を指す、DOMの考え方での同義語。
ドキュメントの根要素: 文書全体の最上位の要素。
ドキュメントルート要素: ドキュメントの根要素を特に強調して表現した言い換え。
文書の根要素: 日本語での自然な表現。文書の最上位要素を指す言い換え。
HTML文書の根要素: HTML形式の文書における根本の要素。通常<html>。
HTMLのルート要素: HTML文書の最上位の要素。通常<html>を指す。
HTMLドキュメントのルート要素: HTMLドキュメントの根要素。<html>が該当することが多い。
documentElementプロパティ: JavaScriptで文書の根要素を取得するためのプロパティ。値は通常HTML文書の<html>要素。
ドキュメントのトップ要素: 文書の最上位の要素。構造の起点となる要素。
最上位要素: 階層構造の最も上にある要素。文書の根元を成す要素を指す表現。
根元要素: 根元という言い方で表す、文書の根本の要素。

documentelementの対義語・反対語

非根要素: ドキュメントの根（documentElement）ではなく、根の下に位置する要素のこと。HTML でいえばやがこのカテゴリーに該当します。つまり、根要素の反対の立場の要素を指す表現です。
子要素: 根要素（documentElement）の直接の子。HTML では <head> とがの子要素で、根の直下に位置するわけではないが、根要素の一部としての位置を示します。
葉ノード: ツリー構造の末端ノード。子を持たないノードや要素を含み、根要素の対蹠（対比）となるイメージです。
テキストノード: 要素の中の文字列データを表すノード。要素ノード（タグ）と対になるノード種別の一つです。
コメントノード: XML/HTML のコメント情報を表すノード。要素ノード以外の内容として対比されることがあります。
非要素ノード: 要素ノード以外のノード全般（テキストノード、コメントノードなど）をまとめて指す総称です。
DocumentFragment: 文書全体の一部を一時的に格納する軽量なノード群。実際の根要素ではなく、挿入操作を効率化するための「仮の容れ物」として扱われます。
ドキュメント（Document）: DOM の文書全体を表すオブジェクト。documentElement はこの文書の根要素であり、対として「根要素」を別の概念として覚えると理解が深まります。

documentelementの共起語

HTML要素: HTML文書のルート要素。document.documentElement が指すのはタグに対応する要素です。
ルート要素: 文書の最上位の要素。HTML文書では要素がこれに該当します。
DOM / ドキュメントオブジェクトモデル: Webページの構造を木構造として表現する仕組み。document.documentElement もこの DOM の一部です。
Document / document: 現在表示中のHTML文書を表すグローバルオブジェクト。document.documentElement はこの Document のプロパティです。
Element / 要素ノード: 要素ノードを表す DOM の基本単位。document.documentElement は Element のインスタンスです。
Node / ノード: DOM の基本クラス。要素もノードの一種です。
head / body: HTML のおよび要素。document.documentElement の直下に現れる代表的な子要素です。
tagName: 要素のタグ名を返すプロパティ。document.documentElement.tagName は通常 'HTML' を返します。
innerHTML / outerHTML: 要素の内側の HTML 文字列（innerHTML）や要素全体の HTML 文字列（outerHTML）を取得・設定します。
DOCTYPE / DOCTYPE: 文書型宣言。DOCTYPE は文書の型を宣言し、document.documentElement はその後の HTML のルート要素です。
createElement / appendChild: 新しい要素を作成し DOM ツリーに追加する代表的な方法。document.documentElement へも追加可能です。
querySelector / getElementById / getElementsByTagName: 要素を検索・取得するための DOM メソッド。document.documentElement の内部からでも使えます。
HTMLDocument: HTML文書を表す DOM のインターフェース。現在は Document として扱われることが多いです。
タグ: タグそのもの。document.documentElement がこの要素を指します。
root / ルート: 木構造の最上位要素のこと。document.documentElement は文書の Root Element です。
childNodes / children: document.documentElement の子ノード集合。children は要素ノードだけ、childNodes はすべてのノードを含みます。
firstElementChild / lastElementChild: document.documentElement の最初の子要素と最後の子要素を取得するプロパティ。
textContent: 要素内のテキスト内容を取得・設定するプロパティ。document.documentElement のテキストを扱う際に使います。
childElementCount: document.documentElement の子要素の数を表すプロパティ。
localName: 要素のローカル名。document.documentElement.localName は 'html' を返します。
namespaceURI: 要素の名前空間 URI。HTML文書では通常 null です。

documentelementの関連用語

documentElement: ドキュメントの根元要素。通常は HTML 文書の要素を指し、 document.documentElement で取得できる。ページのルートを参照する際に使われる。
HTML: HyperText Markup Language の略。ウェブページの構造を記述する言語で、文書の最上位要素はです。
html要素: HTML のルート要素。タグに対応し、ドキュメント全体の根本となる要素です。
DOM: Document Object Model の略。ウェブページを木のような階層構造で表現し、JavaScript から要素を取得・変更するための API。
Document: ドキュメント全体を表すオブジェクト。document を指し、documentElement や body などのプロパティでアクセスします。
Element: DOM の要素ノードの基本型。<div> や
など、実際の HTML のタグを表します。
Node: DOM の木の各点を表す基本単位。Element は Node の一種で、テキストノードやコメントノードなども含みます。
HTMLElement: HTML 要素を表す特別なタイプの要素ノード。style や innerHTML などのプロパティを利用できます。
head要素: HTML文書の要素。メタ情報・タイトル・外部リソースのリンクを格納します。
body要素: HTML文書の要素。画面に表示される内容を含み、ページのレイアウトの基盤です。
innerHTML: 要素の内部HTMLを文字列として取得・設定します。設定すると子要素が置換されます。
outerHTML: 要素自体を含むHTML全体を文字列として取得・設定します。設定すると要素そのものが置換されます。
textContent: 要素内のテキストだけを取得・設定します。HTMLタグは無視され、テキストのみが対象です。
getElementById: ID 属性で要素を1つだけ取得するメソッド。ドキュメント内でIDは一意である必要があります。
querySelector: CSS セレクタを使って条件に合致する最初の要素を取得します。
querySelectorAll: CSS セレクタに合致するすべての要素を NodeList として取得します。
createElement: 新しい HTML 要素ノードを作成します。まだ DOM には追加されていません。
appendChild: 親要素の末尾に子ノードを追加します。古い追加方法の一つです。
append: 複数のノードや文字列を末尾に追加します。引数は DOM ノードや文字列を混在させられます。
removeChild: 親要素から子ノードを削除します。
classList: 要素に対するクラスの管理を便利に行えるオブジェクト。add・remove・toggle などのメソッドがあります。
getAttribute: 要素の属性の値を取得します。
setAttribute: 要素の属性の値を設定します。属性がなければ新しく追加されます。
document.body: document の body 要素を指すプロパティ。ページ内の表示領域を操作する際に使います。
DOMContentLoaded: DOM の読み込みと解析が完了した時点で発火するイベント。画像などのリソースはまだ完全には読まれていません。
window.onload: ページ内のすべてのリソースの読み込みが完了した時点で発火するイベントです。
NodeList: querySelectorAll などの結果として得られるノードの集合。配列のように扱えますが、実際にはライブではありません。
HTMLCollection: getElementsByTagName などの結果として得られる、要素のコレクション。ライブ（リアルタイムで更新されます）。
firstElementChild: 要素の最初の子要素を返します。テキストノードは含みません。
lastElementChild: 要素の最後の子要素を返します。
nextElementSibling: この要素の次の兄弟要素を返します。
previousElementSibling: この要素の前の兄弟要素を返します。