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

W3C DOMでアクセスできるドキュメントプロパティの一覧と使い方を解説

W3C DOMでアクセスできるドキュメントプロパティとは

W3C DOM（Document Object Model）では、JavaScriptを通じてドキュメントオブジェクトが持つさまざまなプロパティにアクセスできます。これらのプロパティを活用することで、HTML文書の構造情報や表示状態をプログラムから取得・操作することが可能になります。

以下に、W3C DOMを使用してアクセスできる主なドキュメントプロパティを一覧でまとめました。

番号プロパティと説明
1body
ドキュメントの<body>タグを表すElementオブジェクトへの参照です。ページ内の要素の追加や削除など、本文領域への操作の起点としてよく使われます。
例：document.body
2defaultView
読み取り専用のプロパティで、ドキュメントが表示されているウィンドウ（windowオブジェクト）を表します。ウィンドウサイズの取得などに利用できます。
例：document.defaultView
3documentElement
ドキュメントのルート要素である<html>タグへの読み取り専用の参照です。文書全体に対する操作を行いたい場合に使用します。
例：document.documentElement
4implementation
読み取り専用のプロパティで、このドキュメントを生成した実装を表すDOMImplementationオブジェクトを返します。新しい文書の作成などに利用できます。
例：document.implementation

JavaScriptでの使用例

これらのプロパティは、次のように実際のコードで簡単に利用できます。

// body要素を取得
const bodyElement = document.body;
console.log(bodyElement.tagName); // "BODY"

// ドキュメントが表示されているウィンドウを取得
const win = document.defaultView;
console.log(win.innerWidth); // ウィンドウの幅

// ルート要素（html要素）を取得
const rootElement = document.documentElement;
console.log(rootElement.tagName); // "HTML"

まとめ

body、defaultView、documentElement、implementationは、DOM操作の基本となる重要なプロパティです。特にdocument.bodyとdocument.documentElementは、要素の追加・スタイルの変更など、日常的なWeb開発で頻繁に使用されるため、しっかりと理解しておきましょう。

  1. JavaScriptで親要素の子要素を取得する方法【サンプルコード付き】

    JavaScriptでは、親要素が持つchildrenプロパティを参照することで、その直下にある子要素をまとめて取得できます。本記事では、実際に動作するサンプルコードを使いながら、具体的な手順をわかりやすく解説します。 サンプルコード 以下は、JavaScriptを使って親要素（parent1）の子要素を取得し、ボタンのクリックで一括表示させる例です。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta nam

  2. 【JavaScript】ドキュメント全体のHTMLを文字列として取得する方法を解説

    Webページのソースコード全体を取得して処理したい場面は、デバッグや動的なコンテンツ操作など、JavaScript開発では意外と多くあります。この記事では、ドキュメント全体のHTMLを文字列として取得する方法を、具体的なコード例とともにわかりやすく解説します。 innerHTMLプロパティを使った取得方法 ドキュメント全体のHTMLを文字列として取得するには、document.documentElementのinnerHTMLプロパティを利用します。 document.documentElement.innerHTML; document.documentElementはHTML文書のルート要