JavaScript での DOM 操作を理解する: 初心者ガイド-jsチュートリアル-php.cn

JavaScript での DOM 操作を理解する: 初心者ガイド

Susan Sarandon

リリース： 2025-01-17 22:32:10

オリジナル

736 人が閲覧しました

Understanding DOM Manipulation in JavaScript: A Beginner’s Guide

この初心者向けガイドでは、インタラクティブな Web ページを作成するための強力なテクニックである JavaScript のドキュメントオブジェクトモデル (DOM) 操作について説明します。静的なコンテンツを動的で魅力的なエクスペリエンスに変換できるようにするための基本を説明します。

DOM を理解する

DOM は、HTML ドキュメントをオブジェクトのツリー状構造として表すプログラミングインターフェイスです。これを家系図のように考えてください。<html> タグがルートで、<head> と <body> に分岐し、さらに <title>、<div>、 などの他の要素に分岐します。 JavaScript を使用すると、これらの要素にアクセス、変更、追加、削除、再配置できます。

DOM 操作を学ぶ理由

動的コンテンツ: ユーザーのアクションに基づいて Web ページのコンテンツ (テキスト、画像) を更新します。
インタラクティブな機能: モーダル、ドロップダウン、スライダーなどの要素を作成します。
イベント処理: ユーザー入力 (クリック、キーの押下、マウスの動き) に応答します。

DOM 要素へのアクセス

要素の選択が最初のステップです。 JavaScript にはいくつかのメソッドが用意されています:

1. ID 別

<code class="language-javascript">const element = document.getElementById('myId');</code>

ログイン後にコピー

2.クラス名別

<code class="language-javascript">const elements = document.getElementsByClassName('myClass');</code>

ログイン後にコピー

3.タグ名別

<code class="language-javascript">const paragraphs = document.getElementsByTagName('p');</code>

ログイン後にコピー

4. CSS セレクターの使用 (querySelector/querySelectorAll)

<code class="language-javascript">const firstElement = document.querySelector('.myClass'); // First element matching the selector
const allElements = document.querySelectorAll('.myClass'); // All matching elements</code>

ログイン後にコピー

一般的な DOM 操作

1.コンテンツの変更

要素のテキストまたは HTML を変更します:

- テキストコンテンツ:

<code class="language-javascript">document.getElementById('example').textContent = 'New Text';</code>

ログイン後にコピー

- HTML コンテンツ:

<code class="language-javascript">document.getElementById('example').innerHTML = '<b>Bold Text</b>';</code>

ログイン後にコピー

2.属性の変更

要素の属性を更新または追加します:

<code class="language-javascript">const image = document.querySelector('img');
image.setAttribute('src', 'newImage.jpg');
image.setAttribute('alt', 'New Description');</code>

ログイン後にコピー

3.スタイルの変更

.style または CSS クラスを使用して要素の外観を変更します:

<code class="language-javascript">const box = document.getElementById('box');
box.style.backgroundColor = 'blue';
box.style.color = 'white';

box.classList.add('active');
box.classList.remove('inactive');
box.classList.toggle('highlight');</code>

ログイン後にコピー

4.要素の追加と削除

要素を動的に作成および操作する:

- 作成して追加:

<code class="language-javascript">const newDiv = document.createElement('div');
newDiv.textContent = 'I am a new div!';
document.body.appendChild(newDiv);</code>

ログイン後にコピー

- 要素の削除:

<code class="language-javascript">const element = document.getElementById('removeMe');
element.remove();</code>

ログイン後にコピー

イベント処理

DOM 操作とイベントリスナーを組み合わせて、ユーザーのアクションに応答します。

例: ボタンのクリック

(簡潔にするためにコード例は省略されていますが、ボタン要素へのイベントリスナーの追加が含まれます。)

共通イベント: click、mouseover、keydown など

DOM トラバーサル

.parentNode、.parentElement、.children、.childNodes、.nextElementSibling、.previousElementSibling などのプロパティを使用して DOM ツリーを移動し、関連する要素にアクセスします。

パフォーマンスのヒント

DOM アクセスを最小限に抑える: 要素参照を再利用のために変数に保存します。
バッチ更新: 複数の要素を効率的に追加するには、documentFragment を使用します。
過度の innerHTML を避ける: パフォーマンスとセキュリティを向上させるために createElement を使用します。

結論

DOM の操作は、最新の Web 開発にとって不可欠です。これらのテクニックをマスターすると、動的で魅力的なユーザーインターフェイスを構築できます。単純なプロジェクトから始めて、徐々により高度なコンセプトを探求してください。

以上がJavaScript での DOM 操作を理解する: 初心者ガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。