window.documentとは

window.documentは、現在のウェブページに関するすべての情報を扱うためのエントリーポイントとなるオブジェクトです。ブラウザでロードされたHTML文書全体を表し、DOM (Document Object Model) を介してページの構造や内容、スタイルを操作できます。

windowはブラウザのグローバルオブジェクトを指し、documentはそのプロパティの一つです。例えば、window.documentは省略してdocumentと記述することができます。

基本的な使い方

documentは、HTML文書内の要素や属性にアクセスするための多くのメソッドやプロパティを提供します。ここではいくつかの基本的な使い方を見ていきます。

• document.title: ページのタイトルを取得または設定します。
• document.body: HTML文書の要素を取得します。
• document.head: 要素にアクセスします。

// ページタイトルを取得
console.log(document.title);

// ページタイトルを変更
document.title = "新しいタイトル";

// 要素を取得
console.log(document.body);
            

HTML要素の操作

documentを利用すると、ページ内のHTML要素を取得して操作できます。代表的なメソッドには以下があります。

• document.getElementById: IDを指定して要素を取得。
• document.getElementsByClassName: クラス名を指定して要素を取得。
• document.querySelector: CSSセレクタで要素を取得。
• document.querySelectorAll: 複数の要素をNodeListとして取得。

// IDで取得して内容を変更
const element = document.getElementById("example-id");
element.textContent = "新しい内容";

// クラス名で取得してスタイルを変更
const elements = document.getElementsByClassName("example-class");
for (let el of elements) {
    el.style.color = "blue";
}

// CSSセレクタで取得
const firstParagraph = document.querySelector("p");
firstParagraph.style.fontWeight = "bold";

// 全てのリンクを取得して変更
const links = document.querySelectorAll("a");
links.forEach(link => {
    link.setAttribute("target", "_blank");
});
            

イベントリスナーとの連携

documentは、イベントリスナーを設定することで、ユーザーの操作（クリック、入力など）に反応することができます。

// クリックイベントの追加
document.getElementById("my-button").addEventListener("click", () => {
    alert("ボタンがクリックされました！");
});

// 入力イベントの追加
document.querySelector("input").addEventListener("input", (event) => {
    console.log("入力された値: " + event.target.value);
});
            

実践的な例

以下に、documentを活用したいくつかの実践的な例を紹介します。

動的なリストの作成

// 
要素を作成
const ul = document.createElement("ul");

// リスト項目を追加
["項目1", "項目2", "項目3"].forEach(text => {
    const li = document.createElement("li");
    li.textContent = text;
    ul.appendChild(li);
});

// ページに挿入
document.body.appendChild(ul);
            

モーダルの作成

// モーダルを生成
const modal = document.createElement("div");
modal.style.position = "fixed";
modal.style.top = "50%";
modal.style.left = "50%";
modal.style.transform = "translate(-50%, -50%)";
modal.style.padding = "20px";
modal.style.backgroundColor = "#fff";
modal.style.boxShadow = "0 4px 8px rgba(0, 0, 0, 0.2)";

// モーダル内容
modal.innerHTML = "
モーダルの内容です


閉じる";

// 閉じるボタンの設定
modal.querySelector("#close-modal").addEventListener("click", () => {
    modal.remove();
});

// モーダルを表示
document.body.appendChild(modal);
            

まとめ

window.documentは、ウェブページを操作するための強力なツールです。基本的な構造やメソッドを理解することで、動的なコンテンツやインタラクティブなページを簡単に構築できます。ぜひ本ページの例を参考にして実際にコードを書いてみてください。