JavaScriptを使用してページ効果を作成する

JavaScriptを使用してページ効果を作成する

11. JavaScriptを使用してページ効果を作成する

11.1 DOMプログラミング

DOM プログラミング (ドキュメント オブジェクト モデル) ドキュメント オブジェクト モデル

ここに画像の説明を挿入

DOM プログラミングでは、ページ全体がドキュメント オブジェクトと見なされ、HTML 要素は特定のオブジェクトです。DOM の核心は、対応する HTML 要素オブジェクトを見つけ、それを操作 (属性またはスタイルを変更) して、新しい HTML 要素オブジェクトを生成することです。

11.2 JS でページ内の要素を検索する

  • フォームの名前の包含関係を通じてオブジェクトを検索します: document.calForm.num1
  • HTML 要素の id 属性を通じて HTML 要素オブジェクトを取得します。
  • document.getElementById(id)
  • HTML 要素の name 属性を通じて、同じ name 属性値を持つ複数の HTML 要素オブジェクトを取得します。同じ name 属性を持つすべてのオブジェクトを格納する配列を返します。document.getElementsByName document.getElementsByName(name) HTML 要素のタグ名を通じて、同じタグを持つ複数の HTML 要素オブジェクトを取得します。
  • document.getElementsByTagName(tagName)

11.2.1 ダイナミックタイム

ページに表示される時間は動的です。ページが開始されると時間が表示されます。時間には 2 つの種類があります。

サーバー時間 (Java 経由で取得)、クライアント時間 (JS 経由で取得)、各クライアントの時間に従って表示されます。

ここに画像の説明を挿入
ここに画像の説明を挿入

11.2.2 すべて選択またはすべて選択解除機能

ここに画像の説明を挿入
ここに画像の説明を挿入

JavaScript を使用してページ エフェクトを作成する方法については、これで終わりです。より関連性の高い js ページ作成コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • vue.jsページの作成とマウントの順序
  • Nuxt.js ルーティング ジャンプ操作 (ページ ジャンプ nuxt-link)
  • JSはページ上でマウスをクリックしたときに画像の特殊効果を実装します
  • JSP を使用してシンプルなユーザー ログインおよび登録ページを実装するサンプル コード分析
  • Spring Boot で JSP ページを使用する方法

<<:  MySQL データベース テーブルのパーティション分割に関する考慮事項 [推奨]

>>:  Docker を使用して Nginx+Flask+Mongo アプリケーションをデプロイする

推薦する

JavaScriptのvar let constの違いは何ですか?

目次1. 繰り返し宣言1.1 変数1.2 しましょう1.3 定数2. 可変プロモーション2.1 変数...

vue+springbootでログイン機能を実現

この記事の例では、ログイン機能を実現するためのvue+springbootの具体的なコードを参考まで...

SSHを使用してDockerサーバーに接続する方法

初めて docker に触れたときは本当に戸惑いました。初心者向けのチュートリアルを長い間読みました...

WebプロジェクトのDockerデプロイメントの実装

前回の記事では、docker サービスをインストールしました。引き続き、Web プロジェクトのデプロ...

HTMLテキスト内のすべてのタグを置き換える方法

(?i) は大文字と小文字を区別しないことを意味します。大文字と小文字をすべて置き換えます。 htm...

MySQL OOM (メモリオーバーフロー) の解決策

OOM は「Out Of Memory」の略で、メモリオーバーフローを意味します。メモリ オーバーフ...

MySQLのSQLモードの特徴のまとめ

序文SQL モードは、MySQL がサポートする SQL 構文と、実行されるデータ検証チェックに影響...

Nginx リバース プロキシと負荷分散を実装する方法 (Linux ベース)

ここで nginx のリバース プロキシを試してみましょう。リバースプロキシ方式とは、インターネット...

JavaScriptプロトタイプチェーンの詳細な説明

目次1. コンストラクタとインスタンス2. プロパティプロトタイプ3. プロパティ __proto_...

Vuexはセッションストレージデータを結合して、ページを更新するときにデータが失われる問題を解決します

目次序文1. 理由: 2. 解決策のアイデア: 1. ローカル保存方法: 2. 実装手順: 3. 最...

要素 DateTimePicker+vue ポップアップボックスに時間のみが表示される問題を解決する

3つの知識ポイント: 1. CSS子孫セレクターhttps://www.w3school.com.c...

MYSQL パフォーマンス アナライザー EXPLAIN 使用例分析

この記事では、例を使用して MYSQL パフォーマンス アナライザー EXPLAIN の使用方法を説...

Windows 10にOdoo12開発環境をインストールする方法

序文多くの友人は Mac コンピューターを持っていないと言っていますが、Windows 開発は実際に...

Mysql 8.0.17 winx64バージョンのインストール中に発生した問題を解決する

1. my.iniファイルを手動で作成して追加する # クライアントセクション # --------...