documentオブジェクトの使用 | DOM APIの基本 | JavaScript 超完全入門 基本から発展までのすべて

amazon

スマイルSALE

--:--:--

～

検索

ad. 価格範囲を指定して商品を探せます

documentオブジェクトとは？

JavaScriptのdocumentオブジェクトは、現在ブラウザに読み込まれているHTMLドキュメントを表すオブジェクトです。

HTMLドキュメントは、要素同士が階層的につながったDOM（Document Object Model）として扱われます。documentオブジェクトを使用すると、このDOMへアクセスし、HTML要素の取得・変更・追加・削除などを行えます。

例えば、次のような操作が可能です。

• 特定のHTML要素を取得する
• 要素内のテキストを書き換える
• 要素の属性やスタイルを変更する
• 新しいHTML要素を作成する
• 作成した要素をページへ追加する
• ページタイトルを変更する

documentオブジェクトは、ブラウザ環境でJavaScriptからHTMLを操作する際の中心となるオブジェクトです。

documentオブジェクトとDOMの関係

ブラウザはHTMLを読み込むと、その内容をDOMツリーと呼ばれる階層構造へ変換します。

例えば、次のHTMLがあるとします。

<body>
    <h1>ページタイトル</h1>
    <p>本文です。</p>
</body>

ブラウザでは、body要素の中にh1要素とp要素が存在する階層構造として扱われます。

JavaScriptは、documentオブジェクトを入口として、このDOMツリーに含まれる要素へアクセスします。

const heading = document.querySelector("h1");

console.log(heading);

このコードでは、DOMツリーから最初の<h1>要素を取得しています。

documentオブジェクトの主な機能

documentオブジェクトには、DOMを操作するためのさまざまなプロパティやメソッドが用意されています。

getElementByIdでIDから要素を取得する

document.getElementById()は、指定したIDを持つHTML要素を取得するメソッドです。

IDはページ内で一意になるように設定するため、特定の要素を直接取得したい場合に適しています。

getElementByIdの基本構文

document.getElementById("ID名");

要素のテキストを変更する例

次のHTML要素があるとします。

<p id="myElement">変更前のテキスト</p>

JavaScriptからこの要素を取得し、テキストを変更します。

const element = document.getElementById("myElement");

element.textContent = "新しいテキスト";

document.getElementById("myElement")によって、IDがmyElementの要素を取得しています。

取得した要素のtextContentプロパティへ新しい文字列を代入すると、要素内のテキストが書き換えられます。

要素が見つからない場合

指定したIDを持つ要素が存在しない場合、getElementById()はnullを返します。

const element = document.getElementById("unknownElement");

console.log(element); // null

nullのままtextContentなどへアクセスするとエラーになるため、必要に応じて要素が存在するか確認します。

const element = document.getElementById("myElement");

if (element !== null) {
    element.textContent = "新しいテキスト";
}

条件分岐を使用することで、対象の要素が存在する場合だけ処理を実行できます。

querySelectorでCSSセレクタから要素を取得する

document.querySelector()は、CSSセレクタを使用して要素を取得するメソッドです。

指定したCSSセレクタに一致する要素が複数ある場合は、最初に一致した要素だけを返します。

querySelectorの基本構文

document.querySelector("CSSセレクタ");

タグ名、クラス名、ID、属性など、CSSで使用するさまざまなセレクタを指定できます。

const heading = document.querySelector("h1");

const message = document.querySelector(".message");

const button = document.querySelector("#submitButton");

• "h1"は、最初の<h1>要素を取得します。
• ".message"は、messageクラスを持つ最初の要素を取得します。
• "#submitButton"は、IDがsubmitButtonの要素を取得します。

querySelectorでスタイルを変更する例

const heading = document.querySelector("h1");

if (heading !== null) {
    heading.style.color = "blue";
}

この例では、ページ内で最初に見つかった<h1>要素を取得し、文字色を青へ変更しています。

querySelector()も、該当する要素が存在しない場合はnullを返します。

querySelectorAllで複数の要素を取得する

document.querySelectorAll()は、指定したCSSセレクタに一致するすべての要素を取得します。

戻り値は、NodeListと呼ばれる複数のノードをまとめたオブジェクトです。

querySelectorAllの基本構文

document.querySelectorAll("CSSセレクタ");

例えば、ページ内のすべての<p>要素を取得する場合は、次のように記述します。

const paragraphs = document.querySelectorAll("p");

console.log(paragraphs);

取得した各要素に対して処理を行う場合は、forEach()を使用できます。

const paragraphs = document.querySelectorAll("p");

paragraphs.forEach((paragraph) => {
    paragraph.style.color = "blue";
});

このコードでは、ページ内のすべての<p>要素の文字色を青へ変更しています。

querySelectorとquerySelectorAllの違い

1つの要素だけを取得する場合はquerySelector()、複数の要素をまとめて取得する場合はquerySelectorAll()を使用します。

新しい要素を作成する

document.createElement()は、新しいHTML要素を作成するメソッドです。

ただし、createElement()で要素を作成しただけでは、画面には表示されません。作成した要素を既存のDOMツリーへ追加する必要があります。

createElementの基本構文

document.createElement("タグ名");

新しい段落を作成して追加する例

const newParagraph = document.createElement("p");

newParagraph.textContent =
    "これは新しく追加された段落です。";

document.body.appendChild(newParagraph);

この処理は、次の順序で行われています。

1. createElement("p")で、新しい<p>要素を作成する
2. textContentで、作成した要素へテキストを設定する
3. appendChild()で、<body>要素の末尾へ追加する

createElement()で作成した要素は、JavaScript上には存在しますが、DOMへ追加されるまではページに表示されません。

クラスを設定してから追加する例

const message = document.createElement("p");

message.textContent = "処理が完了しました。";

message.classList.add("success-message");

document.body.appendChild(message);

classList.add()を使用すると、作成した要素へCSSクラスを追加できます。

あらかじめ次のようなCSSを用意しておけば、追加した要素へスタイルを適用できます。

.success-message {
    font-weight: bold;
    color: green;
}

指定した要素の中へ追加する例

新しい要素は、必ずしもdocument.bodyへ直接追加する必要はありません。取得した特定の要素の中へ追加することもできます。

次のHTMLがあるとします。

<div id="messageArea"></div>

この要素の中へ、新しい段落を追加します。

const messageArea =
    document.getElementById("messageArea");

const newParagraph =
    document.createElement("p");

newParagraph.textContent =
    "新しいメッセージです。";

if (messageArea !== null) {
    messageArea.appendChild(newParagraph);
}

このコードでは、IDがmessageAreaの要素を取得し、その子要素として新しい<p>要素を追加しています。

document.bodyプロパティ

document.bodyは、HTMLドキュメントの<body>要素を参照するプロパティです。

<body>要素は、ブラウザ上に表示されるページ内容の中心となるため、document.bodyを使用すると、ページ全体へ要素を追加したり、スタイルを変更したりできます。

body要素を取得する例

const bodyElement = document.body;

console.log(bodyElement);

document.bodyはメソッドではなくプロパティであるため、末尾に丸括弧()は付けません。

ページ全体の背景色を変更する例

document.body.style.backgroundColor =
    "lightgray";

このコードでは、<body>要素のbackground-colorに相当するスタイルを変更しています。

JavaScriptのstyleプロパティでは、CSSのハイフン区切りのプロパティ名をキャメルケースで記述します。

body要素へ複数の要素を追加する例

const heading = document.createElement("h2");
const paragraph = document.createElement("p");

heading.textContent = "新しい見出し";
paragraph.textContent = "新しい本文です。";

document.body.append(heading, paragraph);

append()を使用すると、複数の要素を一度に追加できます。

appendChild()は一度に1つのノードだけを追加しますが、append()は複数のノードや文字列を追加できる点が異なります。

document.headプロパティ

document.headは、HTMLドキュメントの<head>要素を参照するプロパティです。

<head>要素には、ページタイトル、文字コード、スタイルシート、メタデータなど、ページに関する情報が含まれます。

const headElement = document.head;

console.log(headElement);

通常のDOM操作ではdocument.bodyほど頻繁には使用しませんが、JavaScriptからスタイルシートやメタ要素を追加する場合などに利用できます。

スタイル要素を追加する例

const styleElement =
    document.createElement("style");

styleElement.textContent = `
    .highlight {
        background-color: yellow;
    }
`;

document.head.appendChild(styleElement);

このコードでは、<style>要素を作成し、<head>要素へ追加しています。

ドキュメントのタイトルを操作する

document.titleは、HTMLドキュメントのタイトルを取得または変更するプロパティです。

ここでいうタイトルとは、通常、ブラウザのタブに表示される文字列です。

現在のタイトルを取得する例

const currentTitle = document.title;

console.log(currentTitle);

ページタイトルを変更する例

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

このコードを実行すると、ブラウザのタブに表示されるタイトルが「新しいページタイトル」に変更されます。

例えば、未読メッセージ数や現在表示しているページの状態をタイトルへ反映させることもできます。

const unreadCount = 3;

document.title =
    `(${unreadCount}) 新着メッセージ`;

DOMContentLoadedでHTMLの読み込みを待つ

JavaScriptでHTML要素を取得する場合は、その要素がDOMへ読み込まれた後に処理を実行する必要があります。

対象のHTML要素が作成される前にJavaScriptを実行すると、getElementById()やquerySelector()がnullを返すことがあります。

そのような場合は、DOMContentLoadedイベントを利用できます。

document.addEventListener(
    "DOMContentLoaded",
    () => {
        const heading =
            document.querySelector("h1");

        if (heading !== null) {
            heading.textContent =
                "読み込みが完了しました";
        }
    }
);

DOMContentLoadedは、HTMLの解析が完了し、DOMツリーが構築された時点で発生します。

画像や動画など、すべての外部リソースの読み込み完了を待つ必要はありません。

script要素へdeferを指定する方法

外部JavaScriptファイルを読み込む場合は、defer属性を使用する方法もあります。

<script src="main.js" defer></script>

deferを指定したスクリプトは、HTMLの解析を妨げずに読み込まれ、DOMの構築が完了した後に実行されます。

現在のWeb開発では、外部JavaScriptファイルにdeferを指定する方法がよく利用されます。

要素の内容を変更する方法

取得した要素の内容を変更する代表的なプロパティには、textContentとinnerHTMLがあります。

textContent

textContentは、要素内の内容を単純なテキストとして取得または変更します。

const message =
    document.getElementById("message");

if (message !== null) {
    message.textContent =
        "<strong>完了しました</strong>";
}

textContentでは、HTMLタグのような文字列を指定しても、タグとして解釈されず、そのまま文字として表示されます。

innerHTML

innerHTMLは、要素内のHTMLを取得または変更します。

const message =
    document.getElementById("message");

if (message !== null) {
    message.innerHTML =
        "<strong>完了しました</strong>";
}

この場合、<strong>はHTML要素として解釈され、太字で表示されます。

ただし、ユーザーが入力した内容をそのままinnerHTMLへ代入すると、意図しないHTMLやスクリプトが実行される危険があります。

単純に文字列を表示する場合は、基本的にtextContentを使用する方が安全です。

documentオブジェクトを利用する際の注意点

• 対象の要素が存在しない場合、getElementById()やquerySelector()はnullを返します。
• 要素を操作する前に、必要に応じてnullではないことを確認します。
• HTMLの読み込み前に処理を実行しないよう、deferやDOMContentLoadedを利用します。
• 複数の要素を取得する場合は、querySelectorAll()を使用します。
• 単純な文字列の表示には、原則としてtextContentを使用します。
• ユーザー入力をinnerHTMLへ直接代入しないようにします。
• 多くの要素へ個別にスタイルを設定するより、CSSクラスを追加・削除する方が管理しやすくなります。

まとめ

• documentオブジェクトは、現在のHTMLドキュメントとDOMツリーを表す。
• getElementById()を使用すると、IDを指定して要素を取得できる。
• querySelector()は、CSSセレクタに最初に一致する要素を取得する。
• querySelectorAll()は、CSSセレクタに一致するすべての要素をNodeListとして取得する。
• createElement()を使用すると、新しいHTML要素を作成できる。
• 作成した要素は、appendChild()やappend()でDOMへ追加する。
• document.bodyは<body>要素、document.headは<head>要素を参照する。
• document.titleを使用すると、ブラウザのタブに表示されるタイトルを取得・変更できる。
• DOMの構築後に処理するには、deferやDOMContentLoadedを利用する。
• テキストの変更には、基本的に安全なtextContentを使用する。