JavaScript での DOM 操作

7 日目: JavaScript での DOM 操作

日付: 2024 年 12 月 14 日

JavaScript 学習の 7 日目へようこそ!今日のトピックは、JavaScript の最も魅力的な側面の 1 つである DOM 操作 に焦点を当てます。 DOM 操作を使用すると、Web ページの要素を動的に更新、追加、削除できるため、Web ページがインタラクティブで使いやすくなります。今日のレッスンの終わりまでに、知識を実践するための簡単な ToDo リスト プロジェクトも作成します。

---

1. DOM とは何ですか?

ドキュメント オブジェクト モデル (DOM) は、Web ドキュメント用のプログラミング インターフェイスです。これは HTML ドキュメントの構造をオブジェクトのツリーとして表し、JavaScript を使用してプログラムで要素にアクセスして操作できるようにします。

DOM が HTML を表現する方法の例を次に示します。

  
    <h1 id="Welcome">Welcome</h1>
    <p>This is a paragraph.</p>
  

上記の DOM ツリーは次のようになります:

Document
 └── html
      └── body
           ├── h1
           └── p

---

2. DOM 要素へのアクセス

いくつかの方法を使用して DOM 内の要素にアクセスできます。

getElementById の使用

let title = document.getElementById("title");
console.log(title); // Logs the element with ID "title"

getElementsByClassName の使用

let items = document.getElementsByClassName("item");
console.log(items); // Logs all elements with class "item"

querySelector と querySelectorAll の使用

let firstItem = document.querySelector(".item"); // First element with class "item"
let allItems = document.querySelectorAll(".item"); // All elements with class "item"

---

3. DOM 要素の変更

コンテンツの変更

次のコマンドを使用して、要素内のテキストまたは HTML を更新できます。

• innerText: 表示されるテキストを更新します。
• innerHTML: HTML コンテンツを更新します。

let title = document.getElementById("title");
title.innerText = "Updated Title"; // Changes visible text
title.innerHTML = "<strong>Updated Title</strong>"; // Adds HTML formatting

スタイルを変える

要素の CSS スタイルを直接変更できます。

let title = document.getElementById("title");
title.style.color = "blue";
title.style.fontSize = "24px";

クラスの追加または削除

let box = document.getElementById("box");
box.classList.add("highlight");  // Adds a class
box.classList.remove("highlight"); // Removes a class

---

4.イベントの処理

イベントを使用すると、Web ページをインタラクティブにすることができます。ここでは、一般的なイベントの種類とその処理方法をいくつか示します。

インラインイベント処理

HTML 内:

<button onclick="alert('Button Clicked!')">Click Me</button>

addEventListener の使用

JavaScript を HTML から分離するため、このアプローチが推奨されます。

let button = document.getElementById("btn");
button.addEventListener("click", function () {
  alert("Button Clicked!");
});

一般的なイベント

• click: 要素がクリックされるとトリガーされます。
• mouseover: 要素の上にマウスを置くとトリガーされます。
• keyup: キーが放されたときにトリガーされます。

例:

  
    <h1 id="Welcome">Welcome</h1>
    <p>This is a paragraph.</p>
  

---

5.プロジェクト: ToDo リスト

学んだことをシンプルな To-Do リスト アプリケーションに組み合わせてみましょう。

HTML 構造

Document
 └── html
      └── body
           ├── h1
           └── p

仕組み

1. ユーザーが入力フィールドにタスクを入力します。
2. [タスクを追加] をクリックすると、新しい
3. が作成されます。タスクの要素。
4. 各タスクには、タスクを削除するための「削除」ボタンがあります。

---

6.重要なポイント

1. DOM アクセス: getElementById や querySelector などのメソッドを使用します。
2. DOM 変更: コンテンツ、スタイル、クラスを動的に変更します。
3. イベント処理: addEventListener を使用してページをインタラクティブにします。
4. 実践プロジェクト: 知識を強化するために ToDo リストを作成します。

---

7 日目の練習タスク

1. To Do リストに「完了としてマーク」機能を追加します。
2. ユーザーが商品とその数量を入力できる買い物リスト アプリを作成します。
3. 小さなプロジェクトでマウスオーバーやキーダウンなどのイベントタイプを試してください。

---

次のステップ

明日の 8 日目では、エラー処理とデバッグを検討し、JavaScript コードで予期しない問題を処理する方法を学びます。それではまた!

以上がJavaScript での DOM 操作の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。