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 ドキュメントと通信する方法を実際に図示します。

<title>DOM Example</title>


<h1 id="Hello-World">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>

この例では、ボタンをクリックすると、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 </p><div>
const paragraph = document.querySelector('div p');




<h3>
  
  
  2. 動的コンテンツ
</h3>

<p>innerHTML または textContent を変更して、ページのコンテンツをその場で更新します。 </p>

<p><strong>説明:</strong> innerHTML または textContent を使用すると、要素のコンテンツを動的に変更して、インタラクティブで応答性の高い Web ページを実現できます。</p>

<h4>
  
  
  例
</h4>



<pre class="brush:php;toolbar:false">// 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.