DOM

DOMとは？

DOM（ドキュメントオブジェクトモデル）は、 JavaScript がウェブページ上のすべての要素を読み取ったり、 変更したり、反応したりできるようにします。
DOMのツリー構造は、ウェブページの要素を効率的かつ整理された形で読み取ったり、変更したり、反応したりするため に設計されています。

1️Selecting Elements – Detailed


①　getElementById（IDでとる）

<h1 id="title">Hello</h1>
const title = document.getElementById("title");
console.log(title.textContent);

ここでは、IDを使って要素を選んで、その中の文字を表示しています。 こんなふうに、DOMでIDを使って要素を選びます。


②　getElementByClass（Classでとる）

<p class="text">Apple</p>
<p class="text">Banana</p>
const items = document.getElementsByClassName("text");
console.log(items[0].textContent); // Apple
console.log(items[1].textContent); // Banana

ここでは、クラス名を使って要素を全部選んで、それぞれの中の文字を表示しています。
こんなふうに、DOMでクラス名を使って複数の要素を選ぶことができます。


③　document.getElementsByTagName（TagNameでとる）

<p>First</p>
<p>Second</p>
const paragraphs = document.getElementsByTagName("p");
console.log(paragraphs[0].textContent); // First
console.log(paragraphs[1].textContent); // Second

ここでは、タグ名「p」を使ってすべての段落（pタグ）を選んで、それぞれの中の文字を表示しています。
こんなふうに、DOMでタグ名を使って要素をまとめて選ぶことができます。


④　初めのだけプリントする。

<p class="text">First</p>
<p class="text">Second</p>
const firstText = document.querySelector(".text");
console.log(firstText.textContent); // First

ここでは、クラス名「text」を使って最初の1つだけ要素を選んで、その中の文字を表示しています。
こんなふうに、DOMでクラス名を使って1つの要素を選ぶときは querySelector を使います。


⑤　それぞれをアクセスしてプリントする。

<p class="text">A</p>
<p class="text">B</p>
<p class="text">C</p>
const allText = document.querySelectorAll(".text");
for (const element of allText) {
console.log(element.textContent); } クラスのA, B, Cそれぞれをプリントする。

ここでは、クラス名「text」を使ってすべての要素（A, B, C）を選んで、 1つずつ取り出して、中の文字を順番に表示しています。
こんなふうに、querySelectorAll と for...of を使えば、複数の要素をまとめて扱えます。


2️⃣ CHANGING CONTENT（中身を変える）


① textContent（文字だけ変える）

<p id="msg">Hello</p>

<script>
const msg = document.getElementById("msg");
msg.textContent = "Welcome!";
</script>

ここでは、textContent を使って、要素の中の文字を新しい文字に変えています。
HTMLタグは使えず、文字だけを変更します。


② innerHTML（HTMLごと変える）

<div id="box"></div>

<script>
const box = document.getElementById("box");
box.innerHTML = "<strong>Bold Text</strong>";
</script>

ここでは、innerHTML を使って、HTMLタグを含めて内容を変更しています。
タグを使いたいときは innerHTML を使います。


③ innerText（表示されている文字）

<p id="text" style="display:none;">Hidden</p>

<script>
const t = document.getElementById("text");
console.log(t.innerText);
</script>

innerText は、画面に表示されている文字だけを扱います。


3️⃣ CHANGING STYLE（スタイルを変える）


① style.color

<p id="colorText">Color Text</p>

<script>
const el = document.getElementById("colorText");
el.style.color = "red";
</script>

ここでは、JavaScriptからCSSの色を変更しています。


② style.backgroundColor

<div id="box">Box</div>

<script>
const box = document.getElementById("box");
box.style.backgroundColor = "yellow";
</script>

CSSの background-color は、JSでは backgroundColor と書きます。


③ 複数のスタイルを変更

box.style.color = "blue";
box.style.padding = "10px";
box.style.border = "1px solid black";

こんなふうに、スタイルは1つずつ変更できます。

🟦 DOM MANIPULATION（DOM操作）


DOM MANIPULATION とは、
JavaScript を使って、HTML要素を作る・消す・変更することです。


1️⃣ CREATING ELEMENTS（要素を作る）


HTMLに 新しい要素を追加します。


① 要素を作る

const p = document.createElement("p");
p.textContent = "Hello";

ここでは、p タグを作っています。
まだ画面には表示されません。


② 要素を追加する

<div id="container"></div>

<script>
const container = document.getElementById("container");
container.appendChild(p);
</script>

ここでは、作った要素を画面に表示しています。


③ クラスをつけて作る

p.className = "text";

作った要素に、クラスを追加しています。


④ 複数の要素を作る

for (let i = 1; i <= 3; i++) {
  const li = document.createElement("li");
  li.textContent = i;
  container.appendChild(li);
}

ループを使うと、
たくさんの要素を作れます。


⑤ 前・後ろに追加する

container.prepend(p);

prepend は、
要素を 一番前 に追加します。


2️⃣ REMOVING ELEMENTS（要素を消す）


HTML要素を 画面から削除します。


① 要素を取得して削除

<p id="text">Hello</p>

<script>
const text = document.getElementById("text");
text.remove();
</script>

ここでは、p 要素を削除しています。


② ボタンクリックで削除

<button id="btn">Remove</button>

<script>
btn.addEventListener("click", () => {
  text.remove();
});
</script>

ボタンを押したときに、
要素を削除します。


③ 親から子を削除

container.removeChild(p);

親要素を使って、
子要素を削除します。


④ 複数要素を削除

const items = document.querySelectorAll(".item");
items.forEach(item => item.remove());

同じクラスの要素を、
まとめて削除できます。


⑤ 削除できない場合

if (text) {
  text.remove();
}

要素があるか確認してから削除します。


3️⃣ MODIFYING ATTRIBUTES（属性を変更）


属性とは、
id、src、href などのことです。


① 属性を取得

<img id="img" src="a.png">

<script>
console.log(img.getAttribute("src"));
</script>

画像の src を取得しています。


② 属性を変更

img.setAttribute("src", "b.png");

画像を別のものに変更します。


③ 属性を削除

img.removeAttribute("src");

属性を削除します。


④ input の value

<input id="input" value="Hello">

<script>
console.log(input.value);
</script>

value は直接取得できます。


⑤ disabled を変更

input.disabled = true;

入力をできなくします。


4️⃣ CLASS MANIPULATION（クラス操作）


クラスを使って、
見た目や状態を切り替えます。


① クラスを追加

box.classList.add("active");

クラスを追加します。


② クラスを削除

box.classList.remove("active");

クラスを削除します。


③ クラスを切り替える

box.classList.toggle("active");

あれば削除、なければ追加します。


④ クラスがあるか確認

box.classList.contains("active");

クラスがあるかチェックします。


⑤ クリックでクラス操作

<button id="btn">Toggle</button>

<script>
btn.addEventListener("click", () => {
  box.classList.toggle("active");
});
</script>

クリックで、
クラスを切り替えます。


🟦 DOM EVENT（DOMイベント）


DOMイベントとは、
ユーザーの操作（クリック・入力・マウス移動など）をきっかけに、JavaScriptが動く仕組みです。


1️⃣ EVENT LISTENERS（イベントを聞く）


① onclick（簡単な書き方）

<button id="btn">Click</button>

<script>
const btn = document.getElementById("btn");
btn.onclick = function () {
  console.log("Button clicked");
};
</script>

ここでは、ボタンがクリックされたときに、
console.log が実行されます。
onclick は 1つのイベントしか設定できません。


② onclick で文字を変更

btn.onclick = function () {
  btn.textContent = "Clicked!";
};

クリックしたときに、
ボタンの文字を変更しています。


③ onclick で色を変更

btn.onclick = function () {
  btn.style.color = "red";
};

クリックしたときに、
文字の色を変えています。


④ onclick は上書きされる

btn.onclick = function () {
  console.log("First");
};

btn.onclick = function () {
  console.log("Second");
};

この場合、
後に書いた処理だけが実行されます。


⑤ addEventListener（おすすめ）

btn.addEventListener("click", function () {
  console.log("Clicked");
});

addEventListener を使うと、
複数のイベントを設定できます。


2️⃣ EVENT TYPES（イベントの種類）


① click（クリック）

btn.addEventListener("click", () => {
  console.log("Clicked");
});

要素がクリックされたときに動きます。


② mouseover（マウスを乗せる）

<div id="box">BOX</div>

<script>
box.addEventListener("mouseover", () => {
  console.log("Mouse over");
});
</script>

マウスが要素の上に来たときに動きます。


③ mouseout（マウスが離れる）

box.addEventListener("mouseout", () => {
  console.log("Mouse out");
});

マウスが要素から離れたときに動きます。


④ keydown（キーを押す）

<input id="input" />

<script>
input.addEventListener("keydown", () => {
  console.log("Key down");
});
</script>

キーボードが押されたときに動きます。


⑤ change（変更確定）

input.addEventListener("change", () => {
  console.log(input.value);
});

入力や選択が 確定したときに動きます。


3️⃣ EVENT DELEGATION（イベント委任）


① 基本例

<ul id="list">
  <li>Apple</li>
  <li>Banana</li>
</ul>

<script>
const list = document.getElementById("list");
list.addEventListener("click", (event) => {
  console.log(event.target.textContent);
});
</script>

ここでは、ul にイベントをつけています。
クリックされた li の文字を取得しています。


② tagName で確認

list.addEventListener("click", (event) => {
  if (event.target.tagName === "LI") {
    console.log(event.target.textContent);
  }
});

li がクリックされたときだけ処理します。


③ 要素が増えてもOK

<li>Orange</li>

要素を追加しても、
コードを変更する必要はありません。


④ なぜ使う？

処理が軽くなる
コードが短くなる


⑤ よく使う場所

リスト
メニュー
動的に追加される要素


4️⃣ FORMS AND INPUTS（フォームと入力）


① 入力値を取得

<input id="name" />

<script>
name.addEventListener("input", () => {
  console.log(name.value);
});
</script>

入力された文字を取得しています。


② ボタンクリックで取得

<button id="send">Send</button>

<script>
send.addEventListener("click", () => {
  console.log(name.value);
});
</script>

ボタンを押したときに、
入力内容を取得します。


③ フォーム送信

<form id="form">
  <input />
  <button>Send</button>
</form>

<script>
form.addEventListener("submit", () => {
  console.log("Submitted");
});
</script>

フォームが送信されたときに動きます。


④ リロードを止める

form.addEventListener("submit", (e) => {
  e.preventDefault();
});

ページのリロードを止めます。


⑤ 入力チェック

if (name.value === "") {
  alert("Please enter name");
}

入力が空かどうかを確認します。


5️⃣ EVENT BUBBLING & CAPTURING（イベントの流れ）


① 基本構造

<div id="parent">
  <button id="child">Click</button>
</div>

② バブリング（下から上）

parent.addEventListener("click", () => {
  console.log("Parent");
});

child.addEventListener("click", () => {
  console.log("Child");
});

ボタンをクリックすると、
Child → Parent の順で動きます。
これを イベントバブリング と言います。


③ キャプチャリング（上から下）

parent.addEventListener("click", () => {
  console.log("Parent capture");
}, true);

上から下へイベントが流れます。
これを キャプチャリング と言います。


④ バブリングを止める

child.addEventListener("click", (e) => {
  e.stopPropagation();
});

親へのイベント伝播を止めます。


🟦 ADVANCED DOM（応用DOM）


ADVANCED DOM は、
DOMをもっと上手に使って、動的で便利なWebページを作る技術です。


1️⃣ TRAVERSING THE DOM（DOMを移動する）


DOMの中で、
親・子・兄弟などの要素を移動して操作することです。


① 親要素を取得する

<div id="parent">
  <p id="child">Hello</p>
</div>

<script>
const child = document.getElementById("child");
console.log(child.parentElement);
</script>

ここでは、子要素から 親要素 を取得しています。


② 子要素を取得する

const parent = document.getElementById("parent");
console.log(parent.children);

親から 子要素の一覧 を取得できます。


③ 最初・最後の子要素

console.log(parent.firstElementChild);
console.log(parent.lastElementChild);

親の中で、
最初と最後の子要素を取得します。


④ 隣の兄弟要素

console.log(child.nextElementSibling);
console.log(child.previousElementSibling);

同じ階層の隣の要素に移動できます。


⑤ よく使う場面

リスト操作
ボタンから親を探す
隣の要素を変更する


2️⃣ DYNAMIC CONTENT CREATION WITH LOOPS（ループで動的に作る）


JavaScriptで、
データの数だけHTMLを自動で作ることです。


① 配列からリストを作る

const fruits = ["Apple", "Banana", "Orange"];
const ul = document.querySelector("ul");

for (const fruit of fruits) {
  const li = document.createElement("li");
  li.textContent = fruit;
  ul.appendChild(li);
}

配列の中身だけで、
自動で li を作って追加します。


② 番号付きリスト

fruits.forEach((fruit, index) => {
  const li = document.createElement("li");
  li.textContent = (index + 1) + ": " + fruit;
  ul.appendChild(li);
});

番号をつけて表示できます。


③ ボタンで追加

btn.addEventListener("click", () => {
  const li = document.createElement("li");
  li.textContent = "New Item";
  ul.appendChild(li);
});

ボタンを押したときに、
新しい要素を追加します。


④ まとめて追加（軽くする）

const fragment = document.createDocumentFragment();

fruits.forEach(fruit => {
  const li = document.createElement("li");
  li.textContent = fruit;
  fragment.appendChild(li);
});

ul.appendChild(fragment);

一度に追加することで、動作が速くなります。


⑤ よく使う場面

商品リスト
コメント表示
ToDoリスト


3️⃣ PERFORMANCE OPTIMIZATION（高速化）


Webページを軽く、速く動かす工夫です。


① DOMをまとめて取得する

const box = document.getElementById("box");
box.textContent = "Hello";

同じ要素は何度も取得しないようにします。


② ループでDOM操作を減らす

// ❌ ループ内で毎回追加すると重い
items.forEach(item => {
  ul.appendChild(item);
});

ループ内で毎回DOM操作をすると重くなります。


③ fragmentを使う

ul.appendChild(fragment);

まとめて追加することで速くなります。


④ イベント委任を使う

ul.addEventListener("click", () => {
  console.log("Clicked");
});

個別の要素にイベントを付けなくても済みます。


⑤ CSSアニメーションを使う

JSより軽くて速く動きます。


4️⃣ DOM STORAGE（保存）


ブラウザにデータを保存して、
ページを更新しても残すことができます。


① localStorageに保存

localStorage.setItem("name", "Taro");

データをブラウザに保存します。


② データを取得

const name = localStorage.getItem("name");
console.log(name);

保存したデータを取得します。


③ データを削除

localStorage.removeItem("name");

保存したデータを削除します。


④ オブジェクトを保存

const user = { name: "Taro", age: 20 };
localStorage.setItem("user", JSON.stringify(user));

オブジェクトは JSON.stringify で文字列にして保存します。


⑤ 読み込む

const user = JSON.parse(localStorage.getItem("user"));
console.log(user.name);

読み込むときは JSON.parse で元に戻します。


5️⃣ SHADOW DOM & WEB COMPONENTS（カプセル化）


他のCSSやJSに影響されない、
独立した部品を作る技術です。


① カスタム要素を作る

class MyElement extends HTMLElement {
  connectedCallback() {
    this.innerHTML = "<p>Hello</p>";
  }
}

customElements.define("my-element", MyElement);

独自のHTML要素を作成できます。


② HTMLで使う

<my-element></my-element>

作ったカスタム要素をHTMLで使えます。


③ Shadow DOM を作る

this.attachShadow({ mode: "open" });

独立したDOM領域を作成します。


④ スタイルを分離する

this.shadowRoot.innerHTML = `
  <style>p { color: red; }</style>
  <p>Hello</p>
`;

外部のCSSに影響されないスタイルを設定できます。


⑤ 使う場面

UIライブラリ
再利用できる部品
他のスタイルに干渉させたくない時


6️⃣ ANIMATIONS（アニメーション）


JSやCSSで要素を動かす方法です。


① styleで動かす

box.style.transform = "translateX(100px)";

JavaScriptから直接スタイルを変更して動かします。


② CSS transitionを使う

.box {
  transition: 0.3s;
}

CSSでスムーズな動きを設定します。


③ クラスを追加して動かす

box.classList.add("move");

クラスを追加することでアニメーションを開始します。


④ setTimeoutで遅らせる

setTimeout(() => {
  box.style.opacity = 0;
}, 1000);

一定時間後にアニメーションを実行します。


⑤ requestAnimationFrameでスムーズ

requestAnimationFrame(() => {
  box.style.left = "100px";
});