JavaScript で DOM 操作をマスターする: 包括的なガイド

JavaScript での DOM 操作

DOM 操作 は、開発者が Web ページのコンテンツ、構造、スタイルを動的に変更できるようにする、最新の Web 開発の基本的な側面です。ドキュメント オブジェクト モデル (DOM) は、Web ページの HTML 構造をツリー状の形式で表します。

---

1. DOM とは何ですか?

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: &lt;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: &lt;p&gt;Hello, World!&lt;/p&gt;

C. querySelectorAll の使用

一致するすべての要素を NodeList として選択します。

const allParagraphs = document.querySelectorAll("p");
console.log(allParagraphs); // Output: NodeList of <p> elements

---

3. DOM 要素の変更

A.コンテンツの変更

コンテンツを変更するには、textContent プロパティまたは innerHTML プロパティを使用します。

const paragraph = document.querySelector("p");
paragraph.textContent = "Hello, JavaScript!";
// Changes <p>Hello, World!</p> to <p>Hello, JavaScript!</p>

B.属性の変更

setAttribute または直接プロパティ割り当てを使用します。

const image = document.querySelector("img");
image.setAttribute("src", "new-image.jpg");
image.alt = "A descriptive text";

C.スタイルを変更する

スタイル プロパティを変更してインライン スタイルを適用します。

const container = document.getElementById("container");
container.style.backgroundColor = "lightblue";
container.style.padding = "20px";

---

4.要素の追加と削除

A.新しい要素の作成

createElement メソッドを使用します。

const newParagraph = document.createElement("p");
newParagraph.textContent = "This is a new paragraph.";
document.body.appendChild(newParagraph);

B.要素を削除しています

removeメソッドまたはremoveChildを使用します。

const paragraph = document.querySelector("p");
paragraph.remove(); // Removes the paragraph from the DOM

---

5.要素へのイベント リスナーの追加

イベント リスナーを使用して要素に対話性を追加できます。

const button = document.createElement("button");
button.textContent = "Click Me";

button.addEventListener("click", function() {
  alert("Button clicked!");
});

document.body.appendChild(button);

---

6. DOM を横断する

親、子、兄弟要素間を移動します。

A.親と子

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

B.兄弟

const sibling = child.nextElementSibling;
console.log(sibling); // Output: Next sibling element

---

7.パフォーマンスの最適化

1. バッチ更新に documentFragment を使用します: DOM 更新をグループ化することで、リフローと再ペイントを最小限に抑えます。

   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);

1. 直接の DOM 操作を最小限に抑える:
   要素をキャッシュし、一括で変更します。

2. 仮想 DOM ライブラリを使用する:
   複雑なアプリケーションの場合は、React や Vue などのライブラリを検討してください。

---

8.実践例: ToDo リスト

<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: &lt;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: &lt;p&gt;Hello, World!&lt;/p&gt;

---

9.概要

• DOM 操作を使用すると、開発者は Web ページを動的に変更できます。
• 効果的な操作には、getElementById、querySelector、createElement などのメソッドを使用します。
• パフォーマンスを向上させるために、DOM の直接操作を最小限に抑えます。

DOM 操作をマスターすることは、動的でインタラクティブな、ユーザーフレンドリーな Web アプリケーションを作成するために不可欠です。

こんにちは、アバイ・シン・カタヤットです!
私はフロントエンドとバックエンドの両方のテクノロジーの専門知識を持つフルスタック開発者です。私はさまざまなプログラミング言語やフレームワークを使用して、効率的でスケーラブルでユーザーフレンドリーなアプリケーションを構築しています。
ビジネス用メールアドレス kaashshorts28@gmail.com までお気軽にご連絡ください。

以上がJavaScript で DOM 操作をマスターする: 包括的なガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。