JavaScript のドキュメント オブジェクト モデル (DOM) を理解する
こんにちは、素晴らしい JavaScript 開発者の皆さん?
ブラウザは、スクリプト (特に JavaScript) が Web ページのレイアウトと対話できるようにするドキュメント オブジェクト モデル (DOM) と呼ばれるプログラミング インターフェイスを提供します。 Web ページのドキュメント オブジェクト モデル (DOM) は、ページのコンポーネントをオブジェクトに配置する階層ツリー状構造であり、ブラウザの読み込み時にブラウザによって作成されます。ドキュメントのスタイル、構成、コンテンツはすべて、このパラダイムを利用して動的にアクセスして変更できます。
DOM を使用した対話
JavaScript を使用して、ドキュメント オブジェクト モデル (DOM) に対して次のような多くの操作を実行できます。
- HTML 要素のコンテンツの変更
- 要素と属性の追加または削除
- クリックやキーの押下などのユーザー イベントに応答する
- ページ内に新しいイベントを作成する
例
JavaScript を使用して要素のコンテンツを変更するには、document.getElementById() 関数で対象を指定し、要素の innerHTML プロパティを変更します。
// Modify an element's content, access it using its ID
document.getElementById("myElement").innerHTML = "New content";
DOM 構造
ドキュメント オブジェクトは DOM のベースにあり、オブジェクトのツリーとして編成されます。すべての HTML 要素はツリー内のノードとして表され、これらのノードは関連するイベント、メソッド、プロパティを持つことができます。 DOM は、これらのノードに移動して操作する方法を提供することで、スクリプトがリアルタイムでページを変更できるようにします。
これは、典型的な HTML ドキュメントの DOM ツリーがどのようなものであるかを示す基本的な例です。
document ├── html │ ├── head │ │ └── title │ └── body │ ├── h1 │ └── p
Web開発におけるDOMの機能
DOM は、さまざまな理由から Web 開発に不可欠です。
- スクリプトがユーザー入力に応じてページのスタイルとコンテンツを変更できるようにすることで、動的でインタラクティブな Web ページ を作成できるようになります。
- さまざまなブラウザがオンライン ページと対話し、操作するための標準化されたインターフェイスを提供することで、プラットフォーム間の統一性を確保します。
- シングルページ アプリケーション (SPA) は、リロードを必要とせずにページを更新するために DOM に依存しているため、動作にとって重要です。
DOM レベルと標準
World Wide Web Consortium (W3C) は、さまざまな Web ブラウザーやシステムにわたる DOM 標準の信頼性と一貫性を保証する DOM 標準を維持しています。この標準は、次のようなさまざまなセクションとレベルに分かれています。
- すべてのドキュメント タイプの基本的なパラダイムは * Core DOM:. です。
- XML ドキュメント モデルは XML DOM と呼ばれます。
- HTML DOM: モデルは HTML ファイル専用に作成されました。
DOM 標準バージョンごとにさらに多くの機能が追加され、より複雑なオンライン ドキュメントの操作や対話が可能になります。
DOM 操作の実世界の図
ここでは、DOM を使用して HTML ドキュメントと通信する方法を実際に図示します。
<!DOCTYPE html>
<html>
<head>
<title>DOM Example</title>
</head>
<body>
<h1 id="header">Hello, World!</h1>
<button onclick="changeHeader()">Change Header</button>
<script>
function changeHeader() {
// Use the DOM to access and modify the h1 element
var header = document.getElementById("header");
header.textContent = "DOM Manipulation in Action!";
header.style.color = "blue";
}
</script>
</body>
</html>
この例では、ボタンをクリックすると、changeHeader() 関数が呼び出されます。この関数は、DOM を使用して
にアクセスします。要素をそのIDで指定します。次に、テキストの内容とヘッダーの色を変更します。
重要な DOM テクニック
1. クエリの選択
document.querySelector() を使用して要素を正確に取得します。
説明: querySelector() を使用すると、CSS セレクターを使用して要素を選択できるため、DOM 要素にアクセスするための強力かつ柔軟な方法になります。
例
// Select the first element with class 'myClass'
const element = document.querySelector('.myClass');
// Select a specific element by ID
const header = document.querySelector('#header' );
// Select the first <p> inside a <div>
const paragraph = document.querySelector('div p');
2. 動的コンテンツ
innerHTML または textContent を変更して、ページのコンテンツをその場で更新します。
説明: innerHTML または textContent を使用すると、要素のコンテンツを動的に変更して、インタラクティブで応答性の高い Web ページを実現できます。
例
// Using innerHTML (can include HTML tags)
document.querySelector('#myDiv').innerHTML = '<strong>New content!</strong>';
// Using textContent (plain text only, safer for user inputs)
document.querySelector('#myParagraph').textContent = 'Updated text content';
3. イベントリスニング
インタラクティブなユーザー エクスペリエンスのための要素に addEventListener() を追加します。
説明: addEventListener() を使用すると、クリック、キーの押下、マウスの動きなどのユーザー アクションに応答して、対話型 Web アプリケーションを作成できます。
例
const button = document.querySelector('#myButton' );
button. addEventListener( 'click', function( ) {
alert( 'Button clicked!')
});
// Using arrow function
document.addEventListener('keydown', (event) => {
console. log( 'Key pressed:', event.key);
});
4. DOM トラバーサル
parentNode、子、兄弟のプロパティを使用して DOM ツリーを移動します。
説明: DOM トラバーサルを使用すると、DOM ツリー内の位置に基づいて関連要素にアクセスしながら、ドキュメント構造内を移動できます。
Example
const child = document.querySelector('#childElement');
// Access parent
const parent = child.parentNode;
// Access siblings
const nextSibling = child.nextElementSibling;
const prevSibling = child.previousElementSibling;
// Access children
const firstChild = parent.firstElementChild;
const allChildren = parent.children;
Conclusion
The DOM is a powerful tool in JavaScript that enables developers to create rich, interactive web experiences. By understanding and utilizing the DOM, developers can control the behavior and appearance of web pages, making them more engaging and responsive to user interactions.
以上がJavaScript のドキュメント オブジェクト モデル (DOM) を理解するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
1653
14
1413
52
1304
25
1251
29
1224
24
フロントエンドのサーマルペーパーレシートのために文字化けしたコード印刷に遭遇した場合はどうすればよいですか？
Apr 04, 2025 pm 02:42 PM
フロントエンドのサーマルペーパーチケット印刷のためのよくある質問とソリューションフロントエンド開発におけるチケット印刷は、一般的な要件です。しかし、多くの開発者が実装しています...
javascriptの分解：それが何をするのか、なぜそれが重要なのか
Apr 09, 2025 am 12:07 AM
JavaScriptは現代のWeb開発の基礎であり、その主な機能には、イベント駆動型のプログラミング、動的コンテンツ生成、非同期プログラミングが含まれます。 1）イベント駆動型プログラミングにより、Webページはユーザー操作に応じて動的に変更できます。 2）動的コンテンツ生成により、条件に応じてページコンテンツを調整できます。 3）非同期プログラミングにより、ユーザーインターフェイスがブロックされないようにします。 JavaScriptは、Webインタラクション、シングルページアプリケーション、サーバー側の開発で広く使用されており、ユーザーエクスペリエンスとクロスプラットフォーム開発の柔軟性を大幅に改善しています。
誰がより多くのPythonまたはJavaScriptを支払われますか？
Apr 04, 2025 am 12:09 AM
スキルや業界のニーズに応じて、PythonおよびJavaScript開発者には絶対的な給与はありません。 1. Pythonは、データサイエンスと機械学習でさらに支払われる場合があります。 2。JavaScriptは、フロントエンドとフルスタックの開発に大きな需要があり、その給与もかなりです。 3。影響要因には、経験、地理的位置、会社の規模、特定のスキルが含まれます。
Shiseidoの公式Webサイトのように、視差スクロールと要素のアニメーション効果を実現する方法は？
または：
Shiseidoの公式Webサイトのようにスクロールするページを伴うアニメーション効果をどのように実現できますか？
Apr 04, 2025 pm 05:36 PM
この記事の視差スクロールと要素のアニメーション効果の実現に関する議論では、Shiseidoの公式ウェブサイト（https://www.shisido.co.co.jp/sb/wonderland/）と同様の達成方法について説明します。
JavaScriptは学ぶのが難しいですか？
Apr 03, 2025 am 12:20 AM
JavaScriptを学ぶことは難しくありませんが、挑戦的です。 1）変数、データ型、関数などの基本概念を理解します。2）非同期プログラミングをマスターし、イベントループを通じて実装します。 3）DOM操作を使用し、非同期リクエストを処理することを約束します。 4）一般的な間違いを避け、デバッグテクニックを使用します。 5）パフォーマンスを最適化し、ベストプラクティスに従ってください。
JavaScriptの進化：現在の傾向と将来の見通し
Apr 10, 2025 am 09:33 AM
JavaScriptの最新トレンドには、TypeScriptの台頭、最新のフレームワークとライブラリの人気、WebAssemblyの適用が含まれます。将来の見通しは、より強力なタイプシステム、サーバー側のJavaScriptの開発、人工知能と機械学習の拡大、およびIoTおよびEDGEコンピューティングの可能性をカバーしています。
JavaScriptを使用して、同じIDを持つArray要素を1つのオブジェクトにマージする方法は？
Apr 04, 2025 pm 05:09 PM
同じIDを持つ配列要素をJavaScriptの1つのオブジェクトにマージする方法は？データを処理するとき、私たちはしばしば同じIDを持つ必要性に遭遇します...
フロントエンド開発でVSCodeと同様に、パネルドラッグアンドドロップ調整機能を実装する方法は？
Apr 04, 2025 pm 02:06 PM
フロントエンドのVSCodeと同様に、パネルドラッグアンドドロップ調整機能の実装を調べます。フロントエンド開発では、VSCODEと同様のVSCODEを実装する方法...
