documentオブジェクトとは？
JavaScriptのdocumentオブジェクトは、DOMツリー全体を表す重要なオブジェクトであり、HTMLドキュメントの構造にアクセスして操作するための手段を提供します。documentを使用することで、ページ内の要素を取得したり、新しい要素を作成したりすることが可能です。
documentオブジェクトの主な機能
documentオブジェクトは、DOMの基本操作に欠かせない多数のプロパティやメソッドを提供しています。以下に、documentオブジェクトの代表的なプロパティとメソッドを紹介します。
| プロパティ/メソッド | 説明 |
|---|---|
document.getElementById() |
IDで要素を取得する |
document.querySelector() |
CSSセレクタを使用して最初に一致する要素を取得する |
document.createElement() |
新しいHTML要素を作成する |
document.body |
HTMLの<body>要素を指す |
document.title |
ドキュメントのタイトルを取得または設定する |
例: document.getElementByIdを使用して要素を取得
document.getElementByIdは、IDで指定した要素を取得するためのメソッドです。HTML要素には一意のIDを設定でき、これにより特定の要素を簡単に選択して操作できます。
const element = document.getElementById("myElement");
element.textContent = "新しいテキスト";
この例では、IDがmyElementの要素を取得し、そのテキストを「新しいテキスト」に変更しています。
document.querySelectorとquerySelectorAll
document.querySelectorは、CSSセレクタを使って最初に一致した要素を取得します。document.querySelectorAllは、同じくCSSセレクタを使用して一致するすべての要素を取得します。
例: document.querySelectorを使って要素を取得
const heading = document.querySelector("h1");
heading.style.color = "blue";
この例では、ページ内の最初の<h1>要素を取得し、そのテキストの色を青に変更しています。
新しい要素の作成
document.createElementは、新しいHTML要素を作成するためのメソッドです。作成した要素は、既存のDOMツリーに追加することで表示されます。
例: 新しい要素を作成して追加する
const newParagraph = document.createElement("p");
newParagraph.textContent = "これは新しく追加された段落です。";
document.body.appendChild(newParagraph);
このコードでは、新しい<p>要素を作成し、それを<body>内に追加しています。
document.bodyプロパティ
document.bodyは、HTMLの<body>要素全体を参照するプロパティです。このプロパティを使うことで、ページ全体の内容を動的に変更したり、要素を追加したりすることができます。
ドキュメントのタイトルを操作する
document.titleプロパティを使用すると、現在のHTMLドキュメントのタイトルを取得したり、変更したりできます。これにより、JavaScriptを使ってページのタイトルを動的に変更することが可能です。
例: ページタイトルの変更
document.title = "新しいページタイトル";
このコードでは、ページのタイトルを「新しいページタイトル」に変更しています。
まとめ
documentオブジェクトは、JavaScriptを使ってDOMを操作するための中心的なツールです。document.getElementByIdやdocument.querySelectorを使って特定の要素を取得し、document.createElementで新しい要素を作成して追加することができます。また、document.bodyやdocument.titleを使うことで、ページ全体の構造やタイトルを動的に変更することが可能です。