js DOM学習メモ_javascriptスキル

今日は DOM について学習し、次の基本的な演習を行いました...
DOM は Document Object Model の略で、DHTML 開発で DOM を操作するために JavaScript を使用します。
学習目標: JavaScript を使用して Dom を操作し、一般的な DHTML 効果を実現できるようになります。
参考書籍: Zhang Xiaoxiang の『JavaScript Web 開発 - 体験学習チュートリアル』
1. DOM の概要:
1. DOM は HTML ページのモデルとして扱われます。 DOM の属性とメソッドを呼び出すことで、Web ページ内のテキスト ボックス、レイヤー、その他の要素をプログラムで制御します。たとえば、テキスト ボックスの DOM オブジェクトを操作することで、テキスト ボックスの値を読み取って設定できます。
2. DOM は、WinForm と同様、イベント、プロパティ、メソッドを通じてプログラムできます。
3. CSS JavaScript DOM=DHTML (つまり、HTML 言語の拡張機能。ドキュメントとオブジェクトのプレゼンテーション効果を高めることができます。)
2. イベント:
1. body onmousedown="alert('haha')">onmousedown 内のコードは、マウスがクリックされたときに実行されます。時間イベントに応答するにはコードが多すぎる場合は、別の関数
に入れます。

コードをコピー コードは次のとおりです。

注意: bodymousedown の後の括弧は失われることはありません。これは、onmousedown イベントの応答関数が bodymousedown であるのではなく、bodymousedown 関数を呼び出すことを意味するためです。
2. イベントを動的に設定する:
イベント応答関数は、.Net の「btn.Click=」と同様に、コード内で動的に設定できます。

コードをコピー コードは次のとおりです:

.org/1999/xhtml"> ;head>








5) clearInterval は、setInterval のスケジュールされた実行をキャンセルします。これは、Timer の Enabled=False に相当します。 setInterval は複数のタイミングを設定できるため、clearInterval には、setInterval の戻り値であるクリアするタイマーの識別子を指定する必要があります。 var intervalld= setInterval("alert('hello')",5000);
clearInterval(intervalld);
6) setTimeout も定期的に実行されますが、setInterval のように定期的に実行されるのではなく、設定された時間が経過した後に実行されます。一度だけ実行され、clearTimeout はクリア時間でもあります。
区別は簡単です。インターバルはタイミングを意味し、タイムアウトはタイムアウトを意味します。例: var timeoutld=setTimeout("alert('hello')",2000);
ケース: タイトル バーの回転効果、つまりブラウザのタイトル テキストが 500 ミリ秒ごとに右にスクロールすることを実現します。ヒント: タイトルは document.title 属性です。
4. 1) onload: Web ページが読み込まれるときにトリガーされます。JavaScript が読み込まれていないときに、ブラウザがドキュメントをダウンロードするときに、特定の要素を操作する必要がある場合があります。この場合、操作を本体の onload イベントに配置するか、要素の後に JavaScript を配置する必要があります。要素の onload イベントは要素自体が読み込まれるときにトリガーされ、本体内の onload はすべての読み込みが完了したときにトリガーされます。
2) onunload: Web ページが閉じられた (または終了した) 後にトリガーされます。イベント（表示する警告メッセージ）の「Window.event.returnValue」に値を代入すると、ウィンドウを離れるとき（進む、戻る、閉じるなど）に確認メッセージが表示されます。例:

コードをコピー コードは次のとおりです。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

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

もっと見る

人気の記事

アサシンのクリードシャドウズ：シーシェルリドルソリューション

3週間前 By DDD

Windows11 KB5054979の新しいものと更新の問題を修正する方法

2週間前 By DDD

Atomfallのクレーンコントロールキーカードを見つける場所

3週間前 By DDD

<🎜>：Dead Rails-すべての課題を完了する方法

3週間前 By DDD

Atomfall Guide：アイテムの場所、クエストガイド、およびヒント

4週間前 By DDD

もっと見る

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

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

もっと見る

ホットトピック

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

7649

15

CakePHP チュートリアル

1392

52

Steamのアカウント名の形式は何ですか

91

11

Win11 Activation Key Permanent

73

19

NYTミニクロスワードの回答

36

110

もっと見る

Related knowledge

PHP 学習ノート: データ構造とアルゴリズム Oct 09, 2023 pm 11:54 PM

PHP 学習メモ: データ構造とアルゴリズムの概要: データ構造とアルゴリズムは、コンピューター サイエンスにおける 2 つの非常に重要な概念であり、問​​題を解決し、コードのパフォーマンスを最適化するための鍵となります。 PHP プログラミングでは、データを保存および操作するためにさまざまなデータ構造を使用する必要があり、さまざまな機能を実装するためにアルゴリズムも使用する必要があります。この記事では、一般的に使用されるデータ構造とアルゴリズムをいくつか紹介し、対応する PHP コード例を示します。 1. 線形構造配列 (Array) 配列は最も一般的に使用されるデータ構造の 1 つであり、順序付けされたデータを格納するために使用できます。

vue dom とはどういう意味ですか? Dec 20, 2022 pm 08:41 PM

DOM はドキュメント オブジェクト モデルであり、HTML プログラミング用のインターフェイスであり、ページ内の要素は DOM を通じて操作されます。 DOM は HTML ドキュメントのメモリ内オブジェクト表現であり、JavaScript を使用して Web ページと対話する方法を提供します。 DOM は、ドキュメント ノードをルートとするノードの階層 (またはツリー) です。

Vue3 で DOM ノードを取得する方法は何ですか? May 11, 2023 pm 04:55 PM

1. ネイティブ js は DOM ノードを取得します。 document.querySelector (セレクター) document.getElementById (id セレクター) document.getElementsByClassName (クラス セレクター).... 2. vue2 で現在のコンポーネントのインスタンス オブジェクトを取得します。コンポーネント インスタンスには、対応する DOM 要素またはコンポーネントへの参照を保存する $refs オブジェクトが含まれています。したがって、デフォルトでは、コンポーネントの $refs は空のオブジェクトを指します。まず ref="name" をコンポーネントに追加してから、this.$refs を渡します。

vue3 で dom またはコンポーネントへの ref バインディングが失敗する理由とその解決方法は何ですか? May 12, 2023 pm 01:28 PM

Vue3ref バインディング DOM またはコンポーネントの失敗理由分析シナリオの説明 Vue3 では、コンポーネントまたは DOM 要素をバインドするために ref を使用することがよくありますが、関連するコンポーネントをバインドするために ref が明確に使用されていることがよくありますが、ref バインディングが失敗することがよくあります。 ref バインディングが失敗する状況の例 ref バインディングが失敗するほとんどのケースは、ref がコンポーネントにバインドされているときにコンポーネントがまだレンダリングされていないため、バインディングが失敗することです。または、コンポーネントが最初にレンダリングされず、ref がバインドされていない場合、コンポーネントのレンダリングが開始されると、ref もバインドされ始めますが、ref とコンポーネントの間のバインディングが完了していません。このとき、問題が発生します。コンポーネント関連のメソッドを使用する場合。 ref にバインドされたコンポーネントが v-if を使用するか、その親コン​​ポーネントが v-if を使用してページに

PHP での DOM 操作ガイド May 21, 2023 pm 04:01 PM

Web 開発において、DOM (DocumentObjectModel) は非常に重要な概念です。これにより、開発者は要素の追加、削除、変更など、Web ページの HTML または XML ドキュメントを簡単に変更および操作できるようになります。 PHP に組み込まれている DOM 操作ライブラリも開発者向けに豊富な機能を提供していますので、この記事では、皆様のお役に立てればと思い、PHP での DOM 操作ガイドを紹介します。 DOM の基本概念 DOM は、クロスプラットフォームで言語に依存しない API です。

dom オブジェクトと bom オブジェクトとは何ですか? Nov 13, 2023 am 10:52 AM

DOM オブジェクトは「ドキュメント」、「要素」、「ノード」、「イベント」、「ウィンドウ」の 5 つ、2.「ウィンドウ」、「ナビゲーター」、「場所」、「履歴」、「画面」、その他 5 つです。 BOM オブジェクト。

ボムとドムの違いは何ですか Nov 13, 2023 pm 03:23 PM

BOM と DOM は、役割と機能、JavaScript との関係、相互依存性、さまざまなブラウザーの互換性、セキュリティ上の考慮事項の点で異なります。詳細な紹介: 1. 役割と機能: BOM の主な機能はブラウザ ウィンドウを操作することであり、ブラウザ ウィンドウへの直接アクセスと制御を提供しますが、DOM の主な機能は Web ドキュメントをオブジェクト ツリーに変換し、開発者は、このオブジェクト ツリーを使用して Web ページの要素やコンテンツを取得および変更します。 2. JavaScript などとの関係

DOM の組み込みオブジェクトとは何ですか? Dec 19, 2023 pm 03:45 PM

dom内置オブジェクトの内容：1、document；2、window；3、navigator；4、location；5、history；6、screen；7、document.documentElement；8、document.body；9、document.head；10、document .title；11、document.cookie。

See all articles