成人免费一区二区三区,aa片在线观看视频在线播放

ホームページ

ウェブフロントエンド

jsチュートリアル

JavaScript での DOM 操作

DDD

Dec 20, 2024 pm 08:12 PM

DOM Manipulation in JavaScript

7 日目: JavaScript での DOM 操作

日付: 2024 年 12 月 14 日

JavaScript 學(xué)習(xí)の 7 日目へようこそ!今日のトピックは、JavaScript の最も魅力的な側(cè)面の 1 つである DOM 操作 に焦點(diǎn)を當(dāng)てます。 DOM 操作を使用すると、Web ページの要素を動(dòng)的に更新、追加、削除できるため、Web ページがインタラクティブで使いやすくなります。今日のレッスンの終わりまでに、知識(shí)を?qū)g踐するための簡(jiǎn)単な ToDo リスト プロジェクトも作成します。

1. DOM とは何ですか?

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

DOM が HTML を表現(xiàn)する方法の例を次に示します。

<html>
  <body>
    <h1>Welcome</h1>
    <p>This is a paragraph.</p>
  </body>
</html>

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

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

2. DOM 要素へのアクセス

いくつかの方法を使用して DOM 內(nèi)の要素にアクセスできます。

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 要素の変更

コンテンツの変更

次のコマンドを使用して、要素內(nèi)のテキストまたは 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 ページをインタラクティブにすることができます。ここでは、一般的なイベントの種類(lèi)とその処理方法をいくつか示します。

インラインイベント処理

HTML 內(nèi):

<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: キーが放されたときにトリガーされます。

例:

<html>
  <body>
    <h1>Welcome</h1>
    <p>This is a paragraph.</p>
  </body>
</html>

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

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

HTML 構(gòu)造

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

仕組み

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

6.重要なポイント

DOM アクセス: getElementById や querySelector などのメソッドを使用します。
DOM 変更: コンテンツ、スタイル、クラスを動(dòng)的に変更します。
イベント処理: addEventListener を使用してページをインタラクティブにします。
実踐プロジェクト: 知識(shí)を強(qiáng)化するために ToDo リストを作成します。

7 日目の練習(xí)タスク

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

次のステップ

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

以上がJavaScript での DOM 操作の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。

このウェブサイトの聲明

この記事の內(nèi)容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰屬します。このサイトは、それに相當(dāng)する法的責(zé)任を負(fù)いません。盜作または侵害の疑いのあるコンテンツを見(jiàn)つけた場(chǎng)合は、admin@php.cn までご連絡(luò)ください。

ホットAIツール

Undress AI Tool

脫衣畫(huà)像を無(wú)料で

Undresser.AI Undress

リアルなヌード寫(xiě)真を作成する AI 搭載アプリ

AI Clothes Remover

寫(xiě)真から衣服を削除するオンライン AI ツール。

Clothoff.io

AI衣類(lèi)リムーバー

Video Face Swap

完全無(wú)料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡(jiǎn)単に交換できます。

もっと見(jiàn)る

ホットツール

メモ帳++7.3.1

使いやすく無(wú)料のコードエディター

SublimeText3 中國(guó)語(yǔ)版

中國(guó)語(yǔ)版、とても使いやすい

ゼンドスタジオ 13.0.1

強(qiáng)力な PHP 統(tǒng)合開(kāi)発環(huán)境

ドリームウィーバー CS6

ビジュアル Web 開(kāi)発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

もっと見(jiàn)る

ホットトピック

Gmailメールのログイン入り口はどこですか？

8639

Java チュートリアル

1785

CakePHP チュートリアル

1729

Laravel チュートリアル

1581

PHP チュートリアル

1445

もっと見(jiàn)る

Related knowledge

Java vs. JavaScript：混亂を解消します Jun 20, 2025 am 12:27 AM

JavaとJavaScriptは異なるプログラミング言語(yǔ)であり、それぞれ異なるアプリケーションシナリオに適しています。 Javaは大規(guī)模なエンタープライズおよびモバイルアプリケーション開(kāi)発に使用されますが、JavaScriptは主にWebページ開(kāi)発に使用されます。

JavaScriptコメント：短い説明 Jun 19, 2025 am 12:40 AM

JavaScriptcommentsEareEssentialential-formaining、およびGuidingCodeexecution.1）single-linecommentseared forquickexplanations.2）多LinecommentsexplaincomplexlogiCorprovidededocumentation.3）clarifyspartsofcode.bestpractic

JSで日付と時(shí)間を操作する方法は？ Jul 01, 2025 am 01:27 AM

JavaScriptで日付と時(shí)間を処理する場(chǎng)合は、次の點(diǎn)に注意する必要があります。1。日付オブジェクトを作成するには多くの方法があります。 ISO形式の文字列を使用して、互換性を確保することをお?jiǎng)幛幛筏蓼埂?2。時(shí)間情報(bào)を取得および設(shè)定して、メソッドを設(shè)定でき、月は0から始まることに注意してください。 3.手動(dòng)でのフォーマット日付には文字列が必要であり、サードパーティライブラリも使用できます。 4.ルクソンなどのタイムゾーンをサポートするライブラリを使用することをお?jiǎng)幛幛筏蓼埂￥长欷椁沃匾圣荪ぅ螗趣蛄?xí)得すると、一般的な間違いを効果的に回避できます。

なぜの下部にタグを配置する必要があるのですか？ Jul 02, 2025 am 01:22 AM

PLACSTHETTHETTHE BOTTOMOFABLOGPOSTORWEBPAGESERVESPAGESPORCICALPURPOSESESFORSEO、userexperience、andDesign.1.IthelpswithiobyAllowingseNStoAccessKeysword-relevanttagwithtagwithtagwithtagwithemaincontent.2.iTimrovesexperiencebyepingepintepepinedeeping

JavaScript vs. Java：開(kāi)発者向けの包括的な比較 Jun 20, 2025 am 12:21 AM

javascriptispreferredforwebdevelopment、whilejavaisbetterforlge-scalebackendsystemsandroidapps.1）javascriptexcelsininintingtivewebexperiences withitsdynAmicnature anddommanipulation.2）javaofferstruntypyping-dobject-reientedpeatures

JavaScript：効率的なコーディングのためのデータ型の調(diào)査 Jun 20, 2025 am 12:46 AM

javascripthassevenfundamentaldatypes：number、string、boolean、undefined、null、object、andsymbol.1）numberseadouble-precisionformat、有用であるため、有用性の高いものであるため、but-for-loating-pointarithmetic.2）ストリングリムムット、使用率が有用であること

DOMでのイベントの泡立ちとキャプチャとは何ですか？ Jul 02, 2025 am 01:19 AM

イベントキャプチャとバブルは、DOMのイベント伝播の2つの段階です。キャプチャは最上層からターゲット要素までであり、バブルはターゲット要素から上層までです。 1.イベントキャプチャは、AddEventListenerのUseCaptureパラメーターをTrueに設(shè)定することにより実裝されます。 2。イベントバブルはデフォルトの動(dòng)作であり、UseCaptureはfalseに設(shè)定されているか、省略されます。 3。イベントの伝播を使用して、イベントの伝播を防ぐことができます。 4.イベントバブルは、動(dòng)的なコンテンツ処理効率を改善するためにイベント委任をサポートします。 5.キャプチャを使用して、ロギングやエラー処理など、事前にイベントを傍受できます。これらの2つのフェーズを理解することは、タイミングとJavaScriptがユーザー操作にどのように反応するかを正確に制御するのに役立ちます。

JavaとJavaScriptの違いは何ですか？ Jun 17, 2025 am 09:17 AM

JavaとJavaScriptは、異なるプログラミング言語(yǔ)です。 1.Javaは、エンタープライズアプリケーションや大規(guī)模なシステムに適した、靜的に型付けされ、コンパイルされた言語(yǔ)です。 2。JavaScriptは動(dòng)的なタイプと解釈された言語(yǔ)であり、主にWebインタラクションとフロントエンド開(kāi)発に使用されます。

See all articles

\n \n \n インラインイベント処理<\/strong>\n<\/h4>\n\n
HTML 內(nèi):
\n<\/p>\n\n

国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

Welcome<\/h1>\n
This is a paragraph.<\/p>\n <\/body>\n<\/html>\n<\/pre>\n\n\n\n\n
\n\n

JavaScript での DOM 操作

7 日目: JavaScript での DOM 操作

1. DOM とは何ですか?

2. DOM 要素へのアクセス

getElementById の使用

getElementsByClassName の使用

querySelector と querySelectorAll の使用

3. DOM 要素の変更

コンテンツの変更

スタイルを変える

クラスの追加または削除

4.イベントの処理

インラインイベント処理

addEventListener の使用

一般的なイベント

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

HTML 構(gòu)造

仕組み

6.重要なポイント

7 日目の練習(xí)タスク

次のステップ

ホットAIツール

Undress AI Tool

Undresser.AI Undress

AI Clothes Remover

Clothoff.io

Video Face Swap

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中國(guó)語(yǔ)版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック

国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

Welcome<\/h1>\n This is a paragraph.<\/p>\n <\/body>\n<\/html>\n<\/pre>\n\n\n\n\n\n\n

JavaScript での DOM 操作

7 日目: JavaScript での DOM 操作

1. DOM とは何ですか?

2. DOM 要素へのアクセス

getElementById の使用

getElementsByClassName の使用

querySelector と querySelectorAll の使用

3. DOM 要素の変更

コンテンツの変更

スタイルを変える

クラスの追加または削除

4.イベントの処理

インラインイベント処理

addEventListener の使用

一般的なイベント

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

HTML 構(gòu)造

仕組み

6.重要なポイント

7 日目の練習(xí)タスク

次のステップ

ホットAIツール

Undress AI Tool

Undresser.AI Undress

AI Clothes Remover

Clothoff.io

Video Face Swap

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中國(guó)語(yǔ)版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック

Welcome<\/h1>\n
This is a paragraph.<\/p>\n <\/body>\n<\/html>\n<\/pre>\n\n\n\n\n
\n\n