JavaScript のドキュメントオブジェクトモデル (DOM) を理解する

DDD

リリース： 2024-09-19 01:06:02

オリジナル

786 人が閲覧しました

Understanding Document Object Model (DOM) in JavaScript

こんにちは、素晴らしい 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 標準を維持しています。この標準は、次のようなさまざまなセクションとレベルに分かれています。

すべてのドキュメントタイプの基本的なパラダイムは * 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 サイトの他の関連記事を参照してください。