ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScript で DOM 操作をマスターする: 包括的なガイド
DOM 操作 は、開発者が Web ページのコンテンツ、構造、スタイルを動的に変更できるようにする、最新の Web 開発の基本的な側面です。ドキュメント オブジェクト モデル (DOM) は、Web ページの HTML 構造をツリー状の形式で表します。
DOM は、JavaScript が HTML および CSS と対話できるようにするブラウザーによって提供されるインターフェースです。これはページをノードのツリーとして表し、各要素、属性、またはテキストがノードになります。
以下の HTML の場合:
<div> <p>The DOM structure looks like this:</p> <ul> <li>Document <ul> <li>HTML</li> <li>Body <ul> <li>Div (id="container")</li> <li>Paragraph ("Hello, World!")</li> </ul> </li> </ul> </li> </ul> <hr> <h3> <strong>2. Selecting DOM Elements</strong> </h3> <h4> <strong>A. Using getElementById</strong> </h4> <p>Select an element by its ID.<br> </p> <pre class="brush:php;toolbar:false">const container = document.getElementById("container"); console.log(container); // Output: <div> <h4> <strong>B. Using querySelector</strong> </h4> <p>Select the first matching element.<br> </p> <pre class="brush:php;toolbar:false">const paragraph = document.querySelector("p"); console.log(paragraph); // Output: <p>Hello, World!</p>
一致するすべての要素を NodeList として選択します。
const allParagraphs = document.querySelectorAll("p"); console.log(allParagraphs); // Output: NodeList of <p> elements
コンテンツを変更するには、textContent プロパティまたは innerHTML プロパティを使用します。
const paragraph = document.querySelector("p"); paragraph.textContent = "Hello, JavaScript!"; // Changes <p>Hello, World!</p> to <p>Hello, JavaScript!</p>
setAttribute または直接プロパティ割り当てを使用します。
const image = document.querySelector("img"); image.setAttribute("src", "new-image.jpg"); image.alt = "A descriptive text";
スタイル プロパティを変更してインライン スタイルを適用します。
const container = document.getElementById("container"); container.style.backgroundColor = "lightblue"; container.style.padding = "20px";
createElement メソッドを使用します。
const newParagraph = document.createElement("p"); newParagraph.textContent = "This is a new paragraph."; document.body.appendChild(newParagraph);
removeメソッドまたはremoveChildを使用します。
const paragraph = document.querySelector("p"); paragraph.remove(); // Removes the paragraph from the DOM
イベント リスナーを使用して要素に対話性を追加できます。
const button = document.createElement("button"); button.textContent = "Click Me"; button.addEventListener("click", function() { alert("Button clicked!"); }); document.body.appendChild(button);
親、子、兄弟要素間を移動します。
const child = document.querySelector("p"); const parent = child.parentElement; console.log(parent); // Output: Parent element of <p> const children = parent.children; console.log(children); // Output: HTMLCollection of child elements
const sibling = child.nextElementSibling; console.log(sibling); // Output: Next sibling element
const fragment = document.createDocumentFragment(); for (let i = 0; i < 5; i++) { const li = document.createElement("li"); li.textContent = `Item ${i + 1}`; fragment.appendChild(li); } document.querySelector("ul").appendChild(fragment);
直接の DOM 操作を最小限に抑える:
要素をキャッシュし、一括で変更します。
仮想 DOM ライブラリを使用する:
複雑なアプリケーションの場合は、React や Vue などのライブラリを検討してください。
<div> <p>The DOM structure looks like this:</p> <ul> <li>Document <ul> <li>HTML</li> <li>Body <ul> <li>Div (id="container")</li> <li>Paragraph ("Hello, World!")</li> </ul> </li> </ul> </li> </ul> <hr> <h3> <strong>2. Selecting DOM Elements</strong> </h3> <h4> <strong>A. Using getElementById</strong> </h4> <p>Select an element by its ID.<br> </p> <pre class="brush:php;toolbar:false">const container = document.getElementById("container"); console.log(container); // Output: <div> <h4> <strong>B. Using querySelector</strong> </h4> <p>Select the first matching element.<br> </p> <pre class="brush:php;toolbar:false">const paragraph = document.querySelector("p"); console.log(paragraph); // Output: <p>Hello, World!</p>
DOM 操作をマスターすることは、動的でインタラクティブな、ユーザーフレンドリーな Web アプリケーションを作成するために不可欠です。
こんにちは、アバイ・シン・カタヤットです!
私はフロントエンドとバックエンドの両方のテクノロジーの専門知識を持つフルスタック開発者です。私はさまざまなプログラミング言語やフレームワークを使用して、効率的でスケーラブルでユーザーフレンドリーなアプリケーションを構築しています。
ビジネス用メールアドレス kaashshorts28@gmail.com までお気軽にご連絡ください。
以上がJavaScript で DOM 操作をマスターする: 包括的なガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。