JavaScript HTML DOM をマスターする: 動的でインタラクティブな Web ページの構築-jsチュートリアル-php.cn

JavaScript HTML DOM をマスターする: 動的でインタラクティブな Web ページの構築

Mary-Kate Olsen

リリース： 2024-12-20 02:57:12

オリジナル

356 人が閲覧しました

Mastering the JavaScript HTML DOM: Building Dynamic and Interactive Webpages

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 サイトの他の関連記事を参照してください。