【JavaScript】documentオブジェクトを解説｜Webの基礎

記事内には広告が含まれます

2026年8月14日

JavaScriptのdocumentオブジェクトによるHTML要素の取得・操作解説｜Webの基礎

はじめに

前回の記事では、alert・confirm・promptを使ったダイアログボックスの表示方法について解説しました。

今回は、windowオブジェクトの子オブジェクトであるdocumentを使って、HTML要素を取得・操作する方法を解説します。ボタンをクリックしたらテキストを変える、入力内容をリストに追加するなど、動的なWebページを作るうえで欠かせない基本機能です。要素の取得方法から、テキスト・属性・スタイルの操作、要素の作成・追加・削除まで、実務でよく使う書き方を中心に紹介します。

documentオブジェクトとは？

以前の記事で解説した通り、documentはwindowオブジェクトの子オブジェクトの1つで、表示中のHTML文書（DOM: Document Object Model）そのものを表します。

ブラウザはHTMLを読み込むと、タグの親子関係を「ツリー構造」に変換してメモリ上に保持します。これがDOMです。documentオブジェクトはこのDOMツリーの入り口にあたり、documentのメソッド・プロパティを使うことで、ツリー内の要素を取得したり、内容を書き換えたり、新しい要素を追加したりできます。

console.log(document.title);   // ページのタイトル（<title>タグの内容）
console.log(document.URL);     // 現在のページのURL

window.documentのwindow.は省略可能です。以降のサンプルでも単にdocumentと記述します。

要素を取得する方法

HTML要素を操作するには、まず対象の要素を取得する必要があります。代表的な取得方法は次の4つです。

メソッド	取得対象	戻り値
`getElementById()`	指定したid属性の要素	要素（1つ）
`querySelector()`	CSSセレクタに最初に一致した要素	要素（1つ）
`querySelectorAll()`	CSSセレクタに一致するすべての要素	NodeList
`getElementsByClassName()`	指定したclass属性を持つ要素すべて	HTMLCollection

<p id="msg">こんにちは</p>
<p class="item">りんご</p>
<p class="item">みかん</p>

const msg = document.getElementById("msg");
console.log(msg.textContent); // こんにちは

const first = document.querySelector(".item");
console.log(first.textContent); // りんご

const items = document.querySelectorAll(".item");
items.forEach((el) => console.log(el.textContent)); // りんご → みかん

querySelector・querySelectorAllはCSSセレクタ（#id・.class・tagなど）がそのまま使えるため、CSSの知識をそのまま活かせて汎用性が高い方法です。特別な理由がなければ、この2つを使っておけばほぼ困りません。

NodeListとHTMLCollectionはどちらも「要素の集まり」ですが、forEachが使えるのはNodeListだけです。HTMLCollectionをループしたい場合はArray.from()で配列に変換するか、for文（インデックス指定）を使う必要があります。

テキスト・HTMLの中身を操作する

取得した要素の中身を書き換える方法は、主に次の3種類があります。

プロパティ	内容	HTMLタグの解釈
`textContent`	テキストの取得・設定	されない（そのまま文字列として表示）
`innerHTML`	HTMLの取得・設定	される（タグとして描画される）
`innerText`	画面に表示されている見た目通りのテキスト	されない

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

msg.textContent = "更新しました";           // テキストとして反映
msg.innerHTML = "<strong>更新しました</strong>"; // <strong>タグが効いた状態で反映

innerHTMLにユーザーが入力した文字列をそのまま代入すると、悪意のあるスクリプトを埋め込まれるXSS（クロスサイトスクリプティング）のリスクがあります。ユーザー入力を表示する場合は、HTMLタグを解釈しないtextContentを使うのが安全です。

属性・クラスを操作する

idやhref、srcなどのHTML属性は、getAttribute・setAttributeで読み書きできます。

const link = document.querySelector("a");

console.log(link.getAttribute("href")); // 現在のリンク先を取得
link.setAttribute("href", "https://www.kurumico.com/"); // リンク先を変更
link.removeAttribute("target"); // 属性を削除

class属性の操作には、専用のclassListを使うと便利です。

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

box.classList.add("active");      // クラスを追加
box.classList.remove("hidden");   // クラスを削除
box.classList.toggle("selected"); // あれば削除、なければ追加
box.classList.contains("active"); // クラスの有無をtrue/falseで判定

CSSで見た目を制御している場合、スタイルを直接書き換えるよりclassListでクラスの付け外しをする方が、デザインとロジックを分離できて管理しやすくなります。

スタイルを操作する

要素のstyleプロパティを使うと、インラインスタイルを直接指定できます。CSSのプロパティ名はハイフン区切り（background-color）ですが、JavaScriptではキャメルケース（backgroundColor）で書きます。

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

box.style.backgroundColor = "yellow";
box.style.fontSize = "20px";
box.style.display = "none"; // 非表示にする

複数のスタイルをまとめて変更したい場合や、状態ごとにデザインを切り替えたい場合は、前述のclassListであらかじめCSSで定義したクラスを付け外しする方法がおすすめです。JavaScript側にスタイルの値を書かずに済み、デザイン変更もCSSファイル側で完結します。

要素を作成・追加・削除する

既存の要素を書き換えるだけでなく、新しい要素を作ってページに追加することもできます。

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

const li = document.createElement("li"); // 新しい<li>要素を作成
li.textContent = "追加された項目";

ul.appendChild(li); // ul の最後の子要素として追加

不要になった要素はremove()で削除できます。

const target = document.querySelector(".item");
target.remove();

メソッド	内容
`document.createElement(タグ名)`	新しい要素を作成する（この時点ではまだ画面に表示されない）
`親要素.appendChild(要素)`	親要素の最後の子要素として追加する
`要素.remove()`	要素自体をDOMから削除する

実務サンプル（入力内容をリストに追加する）

入力欄に文字を入力し、ボタンを押すとリストに項目が追加され、各項目に削除ボタンが付くサンプルです。

HTML

<input type="text" id="itemInput" placeholder="項目を入力">
<button id="addBtn">追加</button>
<ul id="itemList"></ul>

JavaScript（main.js）

const input = document.getElementById("itemInput");
const addBtn = document.getElementById("addBtn");
const list = document.getElementById("itemList");

addBtn.addEventListener("click", () => {
    const value = input.value.trim();

    if (value === "") {
        return;
    }

    const li = document.createElement("li");
    li.textContent = value;

    const delBtn = document.createElement("button");
    delBtn.textContent = "削除";
    delBtn.addEventListener("click", () => {
        li.remove();
    });

    li.appendChild(delBtn);
    list.appendChild(li);

    input.value = "";
});

createElementで<li>と削除用の<button>を作り、appendChildで組み立ててからリストに追加しています。削除ボタンには、押されたときに自分自身（li）をremove()するイベントを登録することで、項目ごとの削除処理を実現しています。