ホームページ > 記事 > ウェブフロントエンド > JavaScript のドキュメント オブジェクト モデル (DOM) を理解する
ブラウザは、スクリプト (特に JavaScript) が Web ページのレイアウトと対話できるようにするドキュメント オブジェクト モデル (DOM) と呼ばれるプログラミング インターフェイスを提供します。 Web ページのドキュメント オブジェクト モデル (DOM) は、ページのコンポーネントをオブジェクトに配置する階層ツリー状構造であり、ブラウザの読み込み時にブラウザによって作成されます。ドキュメントのスタイル、構成、コンテンツはすべて、このパラダイムを利用して動的にアクセスして変更できます。
JavaScript を使用して、ドキュメント オブジェクト モデル (DOM) に対して次のような多くの操作を実行できます。
JavaScript を使用して要素のコンテンツを変更するには、document.getElementById() 関数で対象を指定し、要素の innerHTML プロパティを変更します。
// Modify an element's content, access it using its ID document.getElementById("myElement").innerHTML = "New content";
ドキュメント オブジェクトは DOM のベースにあり、オブジェクトのツリーとして編成されます。すべての HTML 要素はツリー内のノードとして表され、これらのノードは関連するイベント、メソッド、プロパティを持つことができます。 DOM は、これらのノードに移動して操作する方法を提供することで、スクリプトがリアルタイムでページを変更できるようにします。
これは、典型的な HTML ドキュメントの DOM ツリーがどのようなものであるかを示す基本的な例です。
document ├── html │ ├── head │ │ └── title │ └── body │ ├── h1 │ └── p
DOM は、さまざまな理由から Web 開発に不可欠です。
World Wide Web Consortium (W3C) は、さまざまな Web ブラウザーやシステムにわたる DOM 標準の信頼性と一貫性を保証する 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 を使用して
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');
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';
インタラクティブなユーザー エクスペリエンスのための要素に 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); });
parentNode、子、兄弟のプロパティを使用して DOM ツリーを移動します。
説明: DOM トラバーサルを使用すると、DOM ツリー内の位置に基づいて関連要素にアクセスしながら、ドキュメント構造内を移動できます。
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;
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 サイトの他の関連記事を参照してください。