1. DOMとは何かDOM ドキュメント オブジェクト モデルは、HTML および XML ドキュメントのプログラミング インターフェイスです。論理ツリーを使用してドキュメントを表します。ツリーの各ブランチの終点は DOM は HTML ドキュメントをノードのツリーとして扱います。ノードは HTML 要素を表します。 DOM ツリー構造をよりよく理解するために、次の HTML コードが提供されています。 <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8" /> <meta name="viewport" content="width=デバイス幅、初期スケール=1.0" /> <meta http-equiv="X-UA-compatible" content="ie=edge" /> <title>DOM ツリー構造</title> </head> <本文> <h1>DOM オブジェクト モデル</h1> <h2>DOM ツリー構造</h2> </本文> </html> ドキュメントはルート ノードと呼ばれ、1 つの子ノード 以下に示すように、 ドキュメント内のこれらの要素には、 2. 要素を選択するドキュメント内の要素を選択するにはどうすればよいですか? HTML ドキュメント内の要素を選択する方法はいくつかあります。そのうちの 3 つを次に示します。
3. getElementById() HTML では、 <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8" /> <meta name="viewport" content="width=デバイス幅、初期スケール=1.0" /> <meta http-equiv="X-UA-compatible" content="ie=edge" /> <title>DOM ツリー構造</title> </head> <本文> <h1>DOM オブジェクト モデル</h1> <h2>DOM ツリー構造</h2> <p id="intro">DOM は Document Object Model の略で、プログラミング インターフェイスです。 </p> <script type="text/javascript"> const elemIntro = document.getElementById("intro"); console.log(要素Intro); </スクリプト> </本文> </html> 開発者ツールを開きます: オブジェクトのテキスト コンテンツを取得する必要がある場合は、 <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8" /> <meta name="viewport" content="width=デバイス幅、初期スケール=1.0" /> <meta http-equiv="X-UA-compatible" content="ie=edge" /> <title>DOM ツリー構造</title> </head> <本文> <h1>DOM オブジェクト モデル</h1> <h2>DOM ツリー構造</h2> <p id="intro">DOM は Document Object Model の略で、プログラミング インターフェイスです。 </p> <script type="text/javascript"> const elemIntro = document.getElementById("intro"); console.log(要素Intro); // 要素内のテキストコンテンツを取得します。const elemText = elemIntro.textContent; // elemIntro.innerText console.log(要素テキスト); </スクリプト> </本文> </html> コントローラーを開いて表示: 4. クエリセレクタ()このメソッドを使用して、1 つ以上の CSS セレクターを持つ要素を検索します。以下は、ナショナル デーの映画スケジュール情報を例に、 <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8" /> <meta name="viewport" content="width=デバイス幅、初期スケール=1.0" /> <meta http-equiv="X-UA-compatible" content="ie=edge" /> <title>DOM ツリー構造</title> </head> <本文> <h1>2021年建国記念日映画スケジュール</h1> <ul class="映画"> <li>長津湖</li> <li>父と私</li> <li>鉄道ヒーローズ</li> </ul> <script type="text/javascript"> const elemTitle = document.querySelector("h1"); const elemList = document.querySelector(".movies"); コンソールログ("h1"); console.log(要素タイトル); console.log("ul ムービー"); console.log(要素リスト); </スクリプト> </本文> </html> ブラウザでドキュメントを開き、開発者ツールをオンにすると、次の効果を確認できます。 5. クエリセレクタAll()このメソッドは、CSS セレクターに一致するすべての要素を検索し、ノードのリストを返します。映画のスケジュールのすべての li 要素を検索してみましょう。 <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8" /> <meta name="viewport" content="width=デバイス幅、初期スケール=1.0" /> <meta http-equiv="X-UA-compatible" content="ie=edge" /> <title>DOM ツリー構造</title> </head> <本文> <h1>2021年建国記念日映画スケジュール</h1> <ul class="映画"> <li>長津湖</li> <li>父と私</li> <li>鉄道ヒーローズ</li> </ul> <script type="text/javascript"> const elemTitle = document.querySelector("h1"); const movieItems = document.querySelectorAll(".movies > li"); console.log(ムービーアイテム); </スクリプト> </本文> </html> コンソール印刷の効果は次のとおりです。 上記のノード リストは次のように走査できます。 <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8" /> <meta name="viewport" content="width=デバイス幅、初期スケール=1.0" /> <meta http-equiv="X-UA-compatible" content="ie=edge" /> <title>DOM ツリー構造</title> </head> <本文> <h1>2021年建国記念日映画スケジュール</h1> <ul class="映画"> <li>長津湖</li> <li>父と私</li> <li>鉄道ヒーローズ</li> </ul> <script type="text/javascript"> const elemTitle = document.querySelector("h1"); const movieItems = document.querySelectorAll(".movies > li"); movieItems.forEach((item) => { console.log(アイテム); }); </スクリプト> </本文> </html> コンソール印刷の効果は次のとおりです。 6. 新しい要素を追加するドキュメントに新しい要素を追加するにはどうすればよいですか? <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8" /> <meta name="viewport" content="width=デバイス幅、初期スケール=1.0" /> <meta http-equiv="X-UA-compatible" content="ie=edge" /> <title>DOM ツリー構造</title> </head> <本文> <h1>2021年建国記念日映画スケジュール</h1> <ul class="映画" id="映画"> <li>長津湖</li> <li>父と私</li> <li>鉄道ヒーローズ</li> </ul> <script type="text/javascript"> const movieItems = document.getElementById("映画"); const newMovie = document.createElement("li"); newMovie.textContent = "ワシはニワトリを捕まえる"; ムービーアイテムに子要素を追加します。 </スクリプト> </本文> </html> 実行後のページ効果は次のようになります。 7. CSSスタイルを変更するインライン CSS スタイルを変更するにはどうすればいいですか? style 属性を使用すると、HTML ドキュメント内の CSS スタイルを変更できます。建国記念日の映画スケジュールを例にとると、ページ タイトルの h1 要素のフォント サイズとフォント色を変更します。 <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8" /> <meta name="viewport" content="width=デバイス幅、初期スケール=1.0" /> <meta http-equiv="X-UA-compatible" content="ie=edge" /> <title>DOM ツリー構造</title> </head> <本文> <h1>2021年建国記念日映画スケジュール</h1> <ul class="映画"> <li>長津湖</li> <li>父と私</li> <li>鉄道ヒーローズ</li> </ul> <script type="text/javascript"> 定数 pageTitle = document.querySelector("h1"); pageTitle.style.fontSize = "24px"; ページタイトル.style.color = "#0000FF"; </スクリプト> </本文> </html> 実行後のページ効果は次のようになります。 CSS スタイルの属性に関しては、JavaScript では camelCase が使用されます。たとえば、 8. イベントを監視する方法ページ上の要素のイベントをどのように使用すればよいですか?次の例では、 <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8" /> <meta name="viewport" content="width=デバイス幅、初期スケール=1.0" /> <meta http-equiv="X-UA-compatible" content="ie=edge" /> <title>DOM ツリー構造</title> </head> <本文> <h1>2021年建国記念日映画スケジュール</h1> <ul id="映画"> <li>長津湖</li> <li>父と私</li> <li>鉄道ヒーローズ</li> </ul> <button id="addNew">映画「Eagle Catches Chicken」を追加する</button> <script type="text/javascript"> const 映画リスト = document.getElementById("映画"); ボタン = document.getElementById("addNew"); const addNewMovie = (movieTitle, elemTarget) => { const newMovie = document.createElement("li"); newMovie.textContent = ムービータイトル; newMovie.style.color = "#ff0000"; 要素Target.appendChild(新しいムービー); }; button.addEventListener("クリック", () => { addNewMovie("鷲は鶏を捕まえる", moviesList); }); </スクリプト> </本文> </html> 実行後のページ効果は次のようになります。 実際のプロジェクトでは、イベントの監視と処理はこれよりも複雑です。現代の WEB 開発では、豊富なフロントエンド フレームワークがすでにイベント処理を非常にうまくカプセル化しており、開発者がイベント バブリング、イベント キャプチャ、イベント委任などのイベント監視の関連知識を忘れてしまうほどです。この記事では、これらについては詳しく説明しません。 結論は: DOM ドキュメント オブジェクト モデル。HTML および XML ドキュメントのプログラミング インターフェイスです。ブラウザが最初に 以下もご興味があるかもしれません:
|
<<: Dockerコンテナが起動直後に終了する問題を解決する
>>: HTML DOM入門_PowerNode Javaアカデミー
Docker コンテナのネットワーク障害に対する 6 つの解決策注: 以下の方法は、コンテナ内のパブ...
# には位置情報が含まれます。デフォルトのアンカーは #top で、これは Web ページの上部です...
ネットフィルターNetfilter は、パケット フィルタリング、転送、およびアドレス変換 NAT ...
序文フロントエンドフレームワークのヘビーユーザーとして、私はテクノロジーを選択する際にそのエコロジー...
1. 構成デフォルトでは、最初の 2 つはチェックされていないので、チェックする必要があります。 (...
Ubuntu 16.04 はデフォルトで PHP7.0 環境をインストールしますが、PHP7 は一部...
目次インストール: 1. ファイアウォールの基本的な使い方2. ファイアウォールd-cmdを設定する...
Windows Server 2016 アクティベーション キーを皆さんと共有したいと思います。wi...
ウェブページに慣れていない友人の多くは私と同じように、HTML で要素、タグ、属性がどのように定義さ...
1. ボックスを中央に配置するいくつかの方法を記録します。 1.0、マージン幅固定、高さ中央配置。 ...
HTML、CSS、JS を使用してシンプルな Web 計算機を作成する方法は?コンピュータには次の...
この記事の例では、じゃんけんゲームを実装するためのJSの具体的なコードを参考までに共有しています。具...
MySQL のデータはディスクに書き込む必要があることは誰もが知っています。ディスクの読み取りと書き...
目次SDKのインストールローカル Docker の管理コンテナの実行バックグラウンドでコンテナを実行...
この記事では、シンプルなカルーセルを実装するためのJavaScriptの具体的なコードを参考までに紹...