JavaScript：DOM操作の基礎

#title の textContent が 変更しました

document.querySelector("#title") で取得し、.textContent に代入する。

const title = document.querySelector("#title");
title.textContent = "変更しました";

取得 → 操作がDOM操作の基本の2手。querySelector はCSSと同じセレクタが使えるので、覚えることが少なくて済む。

解答 == B

「無い」を明示的に表す値。

B

null のまま .textContent を書くと TypeError で止まる。IDのつづりミスや、スクリプトがHTMLより先に読まれた場合に起きる。

出力 == 3

document.querySelectorAll(".item") で全部取れる。件数は .length。

const items = document.querySelectorAll(".item");
console.log(items.length);

querySelector は1つ、querySelectorAll は全部。All のほうは要素が0個でも null にはならず、空のリストが返る。

const el = document.querySelector("#msg");
el.____ = "こんにちは";

#msg の textContent が こんにちは

文字（テキスト）の中身を表すプロパティ。HTMLとして解釈されない安全なほう。

textContent

innerHTML との使い分けが重要。ユーザーが入力した文字をそのまま innerHTML に入れると、悪意あるスクリプトが動く危険がある。

解答 == B

クラスの「一覧」を操作するプロパティ。

B

classList には add / remove / toggle / contains がある。className = "on" と書くと既存のクラスを全部消して置き換えるので注意。

active が付き hidden が消えている

classList.add() と classList.remove() を続けて呼ぶ。

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

box.classList.add("active");
box.classList.remove("hidden");

見た目の切り替えはクラスで行うのが基本。色や大きさはCSS側に書いておき、JavaScriptはクラスを付け外しするだけにすると役割が分かれて管理しやすい。

const list = document.querySelector("#list");
const li = document.____("li");
li.textContent = "新しい項目";
list.appendChild(li);

#list に li が1つ追加され textContent が 新しい項目

「要素を作る」という意味のメソッド。document から呼ぶ。

createElement

作る → 中身を入れる → 追加するの3手が要素追加の定型。createElement しただけでは画面に出ず、appendChild で初めて表示される。

解答 == B

HTMLとして解釈されるかどうか。

B

innerHTML は文字列をHTMLとして解釈するため、<script> などを埋め込まれる危険がある（XSS）。入力された値を表示するときは必ず textContent。

#list の子要素が3つで textContent が りんご/みかん/ぶどう

for...of で回し、毎回 createElement → textContent → appendChild を行う。

const list = document.querySelector("#list");
const items = ["りんご", "みかん", "ぶどう"];

for (const item of items) {
  const li = document.createElement("li");
  li.textContent = item;
  list.appendChild(li);
}

データから画面を組み立てる——これがDOM操作の本質。配列の中身が変わればそのまま画面が変わるので、HTMLを手で書く必要がなくなる。

すべての .item に done が付いている

querySelectorAll の結果は forEach で回せる。

document.querySelectorAll(".item").forEach((el) => {
  el.classList.add("done");
});

querySelectorAll の結果は forEach で回せるが、map や filter は使えない場合がある。配列として扱いたいときは [...document.querySelectorAll(…)] と展開する。

#list に li が2つ、textContent が ノートPC：128,000円 / マウス：3,200円

for...of で回し、テンプレートリテラルで文字を組み立ててから textContent に入れる。

const products = [
  { name: "ノートPC", price: 128000 },
  { name: "マウス", price: 3200 },
];

const list = document.querySelector("#list");

for (const p of products) {
  const li = document.createElement("li");
  li.textContent = `${p.name}：${p.price.toLocaleString()}円`;
  list.appendChild(li);
}

JS07で学んだオブジェクトの配列が、そのまま画面の一覧になった。データと表示が分離しているので、products を差し替えるだけで表示が変わる。

3つの li に pass/fail/pass が付いている

createElement のあと classList.add() で条件に応じたクラスを付ける。三項演算子が使える。

const scores = [82, 45, 91];
const list = document.querySelector("#list");

for (const s of scores) {
  const li = document.createElement("li");
  li.textContent = `${s}点`;
  li.classList.add(s >= 60 ? "pass" : "fail");
  list.appendChild(li);
}

データの中身によって見た目を変える典型パターン。色の指定はCSS側に .pass { color: green; } と書いておけば、JavaScriptは判定に専念できる。

出力2行。要素が見つかりません / 更新しました

取得結果が null かどうかを if で判定する。関数にすると2回書かずに済む。

const update = (selector, text) => {
  const el = document.querySelector(selector);

  if (el === null) {
    console.log("要素が見つかりません");
    return;
  }

  el.textContent = text;
  console.log("更新しました");
};

update("#missing", "新しい文字");
update("#title", "新しい文字");

取得できたか確認してから操作するのが安全な書き方。null チェックを省くと Cannot set properties of null というエラーでページ全体が止まる。

#tbody に tr が2つ、各 tr に td が2つ

tr を作り、その中に td を2つ appendChild してから、tr を tbody に appendChild する。入れ子の構造をそのままコードにする。

const users = [
  { name: "田中", dept: "営業" },
  { name: "鈴木", dept: "開発" },
];

const tbody = document.querySelector("#tbody");

for (const u of users) {
  const tr = document.createElement("tr");

  const tdName = document.createElement("td");
  tdName.textContent = u.name;
  tr.appendChild(tdName);

  const tdDept = document.createElement("td");
  tdDept.textContent = u.dept;
  tr.appendChild(tdDept);

  tbody.appendChild(tr);
}

HTMLの入れ子構造がそのままコードの入れ子になる。tr に td を入れてから tbody に入れる——この順序を守れば、どんな複雑な構造でも組み立てられる。

#list の子要素が2つになり、出力 == 2件を表示しました

中身を空にするには list.innerHTML = "" と書く。そのあと新しい要素を追加していく。

const list = document.querySelector("#list");
const newItems = ["A", "B"];

list.innerHTML = "";

for (const item of newItems) {
  const li = document.createElement("li");
  li.textContent = item;
  list.appendChild(li);
}

console.log(`${newItems.length}件を表示しました`);

再描画は「全部消してから作り直す」のが最も簡単で確実。innerHTML = "" は空文字を入れるだけなので、この用途ならXSSの心配もない。差分だけ更新する方法もあるが、複雑になるので規模が大きくなってから考えればよい。