ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScript HTML DOM をマスターする: 動的でインタラクティブな Web ページの構築
JavaScript HTML DOM をマスターする: 動的でインタラクティブな Web ページの構築
- Mary-Kate Olsenオリジナル
- 2024-12-20 02:57:12385ブラウズ
JavaScript HTML DOM: 完全ガイド
ドキュメント オブジェクト モデル (DOM) は、Web ドキュメント用のプログラミング インターフェイスです。 Web ページの構造をオブジェクトのツリーとして表現し、開発者が JavaScript を使用して HTML と CSS を操作できるようにします。 DOM をマスターすると、動的でインタラクティブな Web ページを作成できます。
DOM とは何ですか?
DOM は HTML ドキュメントの構造化表現です。これにより、JavaScript が Web ページの要素、属性、コンテンツに動的にアクセスして操作できるようになります。
例：
この HTML の場合:
<!DOCTYPE html>
<html>
<head>
<title>DOM Example</title>
</head>
<body>
<h1>
<p>The DOM represents it as:<br>
</p>
<pre class="brush:php;toolbar:false">- Document
- html
- head
- title
- body
- h1
- p
DOM へのアクセス
JavaScript は、DOM 要素を選択および操作するためのメソッドを提供します。
一般的な選択方法
- getElementById ID によって要素を選択します。
const title = document.getElementById("title");
console.log(title.innerText); // Output: Hello, DOM!
- getElementsByClassName クラス名によって要素を選択します (コレクションを返します)。
const paragraphs = document.getElementsByClassName("description");
console.log(paragraphs[0].innerText);
- getElementsByTagName タグ名 (div、p など) で要素を選択します。
const headings = document.getElementsByTagName("h1");
console.log(headings[0].innerText);
- クエリセレクター CSS セレクターに一致する最初の要素を選択します。
const title = document.querySelector("#title");
- querySelectorAll CSS セレクターに一致するすべての要素を選択します (NodeList を返します)。
const paragraphs = document.querySelectorAll(".description");
DOM 操作
選択すると、要素、属性、コンテンツを動的に変更できます。
1.コンテンツの変更
- innerHTML: HTML コンテンツを設定または取得します。
document.getElementById("title").innerHTML = "Welcome to the DOM!";
- innerText または textContent: プレーン テキストを設定または取得します。
document.getElementById("title").innerText = "Hello, World!";
2.属性の変更
- 要素の属性を変更するには、setAttribute と getAttribute を使用します。
const link = document.querySelector("a");
link.setAttribute("href", "https://example.com");
- id、className、src などの属性を直接変更します。
const image = document.querySelector("img");
image.src = "image.jpg";
3.スタイルを変更する
CSS プロパティを直接変更します。
<!DOCTYPE html>
<html>
<head>
<title>DOM Example</title>
</head>
<body>
<h1>
<p>The DOM represents it as:<br>
</p>
<pre class="brush:php;toolbar:false">- Document
- html
- head
- title
- body
- h1
- p
要素の追加と削除
1.要素の追加
- createElement: 新しい要素を作成します。
- appendChild: 要素を親に追加します。
const title = document.getElementById("title");
console.log(title.innerText); // Output: Hello, DOM!
2.要素を削除しています
- removeChild: 子要素を削除します。
const paragraphs = document.getElementsByClassName("description");
console.log(paragraphs[0].innerText);
DOM でのイベント処理
イベントとは、クリックやキーの押下など、ブラウザによって検出されるアクションまたは出来事です。
イベント リスナーの追加
イベントを要素にバインドするには、addEventListener を使用します。
const headings = document.getElementsByTagName("h1");
console.log(headings[0].innerText);
一般的なイベント
- マウスイベント: click、dblclick、mouseover、mouseout
- キーボードイベント: キーダウン、キーアップ
- フォームイベント: 送信、変更、フォーカス
DOM の横断
DOM ツリー内の関係を使用して要素間を移動できます。
親と子
- parentNode: 親ノードを取得します。
- childNodes: すべての子ノードをリストします。
- children: すべての子要素をリストします。
const title = document.querySelector("#title");
兄弟
- nextSibling: 次の兄弟ノードを取得します。
- previousSibling: 前の兄弟ノードを取得します。
高度な DOM 機能
1.要素のクローン作成
cloneNode を使用して要素の複製を作成します。
const paragraphs = document.querySelectorAll(".description");
2.クラスの操作
クラスを操作するには、classList プロパティを使用します。
document.getElementById("title").innerHTML = "Welcome to the DOM!";
3.テンプレートの使用
HTML テンプレートによりコンテンツを再利用できます。
document.getElementById("title").innerText = "Hello, World!";
DOM 操作のベスト プラクティス
-
リフローと再ペイントを最小限に抑える:
- 過剰なレンダリングを避けるために DOM 変更をバッチ処理します。
- 複数の更新には documentFragment を使用します。
イベント委任を使用する:
個々の子要素ではなく、親要素にイベントをアタッチします。
<!DOCTYPE html>
<html>
<head>
<title>DOM Example</title>
</head>
<body>
<h1>
<p>The DOM represents it as:<br>
</p>
<pre class="brush:php;toolbar:false">- Document
- html
- head
- title
- body
- h1
- p
- インライン JavaScript を避ける: コードを明確に分離するには、外部スクリプトまたは addEventListener を使用します。
結論
JavaScript HTML DOM は、動的でインタラクティブな Web ページを作成するための強力なツールです。 DOM 操作、イベント処理、ベスト プラクティスを習得することで、開発者は全体的なユーザー エクスペリエンスを向上させる、応答性の高いユーザー フレンドリーなアプリケーションを構築できます。
こんにちは、アバイ・シン・カタヤットです!
私はフロントエンドとバックエンドの両方のテクノロジーの専門知識を持つフルスタック開発者です。私はさまざまなプログラミング言語やフレームワークを使用して、効率的でスケーラブルでユーザーフレンドリーなアプリケーションを構築しています。
ビジネス用メールアドレス kaashshorts28@gmail.com までお気軽にご連絡ください。
以上がJavaScript HTML DOM をマスターする: 動的でインタラクティブな Web ページの構築の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。