ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScript での DOM 操作を理解する: 初心者ガイド
JavaScript での DOM 操作を理解する: 初心者ガイド
- Susan Sarandonオリジナル
- 2025-01-17 22:32:10737ブラウズ
<p>
<p>この初心者向けガイドでは、インタラクティブな Web ページを作成するための強力なテクニックである JavaScript のドキュメント オブジェクト モデル (DOM) 操作について説明します。 静的なコンテンツを動的で魅力的なエクスペリエンスに変換できるようにするための基本を説明します。
<p>この初心者向けガイドでは、インタラクティブな Web ページを作成するための強力なテクニックである JavaScript のドキュメント オブジェクト モデル (DOM) 操作について説明します。 静的なコンテンツを動的で魅力的なエクスペリエンスに変換できるようにするための基本を説明します。
DOM を理解する
<p>DOM は、HTML ドキュメントをオブジェクトのツリー状構造として表すプログラミング インターフェイスです。 これを家系図のように考えてください。<html> タグがルートで、<head> と <body> に分岐し、さらに <title>、<div>、<p> などの他の要素に分岐します。 JavaScript を使用すると、これらの要素にアクセス、変更、追加、削除、再配置できます。
DOM 操作を学ぶ理由
- 動的コンテンツ: ユーザーのアクションに基づいて Web ページのコンテンツ (テキスト、画像) を更新します。
- インタラクティブな機能: モーダル、ドロップダウン、スライダーなどの要素を作成します。
- イベント処理: ユーザー入力 (クリック、キーの押下、マウスの動き) に応答します。
DOM 要素へのアクセス
<p>要素の選択が最初のステップです。 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.コンテンツの変更
<p>要素のテキストまたは HTML を変更します: <p>- テキストコンテンツ:<code class="language-javascript">document.getElementById('example').textContent = 'New Text';</code>
<p>- HTML コンテンツ:
<code class="language-javascript">document.getElementById('example').innerHTML = '<b>Bold Text</b>';</code>
2.属性の変更
<p>要素の属性を更新または追加します:<code class="language-javascript">const image = document.querySelector('img');
image.setAttribute('src', 'newImage.jpg');
image.setAttribute('alt', 'New Description');</code>
3.スタイルの変更
<p>.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.要素の追加と削除
<p>要素を動的に作成および操作する: <p>- 作成して追加:<code class="language-javascript">const newDiv = document.createElement('div');
newDiv.textContent = 'I am a new div!';
document.body.appendChild(newDiv);</code>
<p>- 要素の削除:
<code class="language-javascript">const element = document.getElementById('removeMe');
element.remove();</code>
イベント処理
<p>DOM 操作とイベント リスナーを組み合わせて、ユーザーのアクションに応答します。 <p>例: ボタンのクリック <p>(簡潔にするためにコード例は省略されていますが、ボタン要素へのイベント リスナーの追加が含まれます。) <p>共通イベント:click、mouseover、keydown など
DOM トラバーサル
<p>.parentNode、.parentElement、.children、.childNodes、.nextElementSibling、.previousElementSibling などのプロパティを使用して DOM ツリーを移動し、関連する要素にアクセスします。
パフォーマンスのヒント
- DOM アクセスを最小限に抑える: 要素参照を再利用のために変数に保存します。
-
バッチ更新: 複数の要素を効率的に追加するには、
documentFragmentを使用します。 -
過度の
innerHTMLを避ける: パフォーマンスとセキュリティを向上させるためにcreateElementを使用します。
結論
<p>DOM の操作は、最新の Web 開発にとって不可欠です。これらのテクニックをマスターすると、動的で魅力的なユーザー インターフェイスを構築できます。 単純なプロジェクトから始めて、徐々により高度なコンセプトを探求してください。以上がJavaScript での DOM 操作を理解する: 初心者ガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
JavaScript batch css html Static Object for include using class Interface Event append dom this innerHTML transform input Access Other
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。