Java例付きスクリプト DOM チュートリアル

替え： ジェームズ・ハートマン ジェームズ・ハートマン
Hours 更新中

⚡ スマートサマリー

JavaスクリプトDOMとイベントにより、スクリプトはウェブページを完全に制御できるようになり、ブラウザがレンダリングしたあらゆる要素をコードで読み取り、変更、追加、削除し、訪問者がクリック、入力、スクロールするたびに即座に反応することができます。

  • 🌳 ノードの種類: DOMツリー内では、要素、テキスト、属性、コメントの各ノードがそれぞれ異なる役割を果たします。
  • 🔍 要素の選択: getElementById、querySelector、およびquerySelectorAllは、スクリプトが操作する必要のある正確なノードを特定します。
  • 会<XNUMXxEXNUMX><XNUMXxXNUMXF>️️<XNUMXxXNUMXF>️️ コンテンツの更新: innerHTML、textContent、およびsetAttributeは、訪問者が実際に画面上で目にする内容を書き換えます。
  • 🧩 ノードの構築: createElementとappendChildは、ページを再読み込みせずに新しい要素を挿入します。
  • 🗑️ ノードの削除: removeChildとremoveは、ライブツリーから不要な要素を削除します。
  • 🖱️ イベント処理: addEventListenerは、クリック、キーアップ、送信のハンドラーを任意の要素にアタッチします。
  • 🔄 イベント委任： 単一の親リスナーとevent.targetによって、多数の子要素のクリックを一度に管理できます。
  • 🤖 AI支援デバッグ： AIコーディングアシスタントがサポートします trac発生しつつある問題点を特定し、複雑なユーザーインターフェースに対する委譲パターンを提案する。
プロフィール

DOMとは何ですか Javaスクリプト？

Javaスクリプトは、ドキュメントオブジェクトモデル（DOM）を利用して、ウェブページ内のすべての要素にアクセスできます。実際、ウェブブラウザはページが読み込まれる際に、ウェブページのDOMを作成します。DOMモデルは、次のようなオブジェクトのツリーとして作成されます。

DOM内 Javaスクリプト

ページ上の各 HTML 要素は、このツリー内のノードになります。ブラウザは DOM ノードをいくつかのコアタイプにグループ化します。要素ノードは、次のようなタグを表します。 <p> or <div>テキストノードはタグ内の表示可能な単語を保持し、属性ノードは次のような値を格納します。 id or class、コメントノードは保持します <!-- --> マークアップ。最上位のノードは常に document オブジェクトであり、他のすべての要素はそのオブジェクトの子孫である。

DOMを使用して、 Javaスクリプト 複数のタスクを実行できます。新しい要素や属性を作成したり、既存の要素や属性を変更したり、既存の要素や属性を削除したりすることも可能です。 Javaスクリプトは、既存のイベントに反応したり、ページ上に新しいイベントを作成したりすることもできます。以下のセクションでは、要素の選択、変更、イベントハンドラの接続について、実践的な実行可能な例を交えながら解説します。

DOMはHTMLソースファイルとは異なるものであることを覚えておくと良いでしょう。ブラウザがダウンロードするHTMLは静的なテキストですが、そのテキストから構築されるDOMは、ライブで動的なオブジェクトモデルです。 JavaスクリプトがDOMに書き込まれると、元のHTMLファイルには一切手を加えることなく、画面上に即座に表示されます。

DOM要素を選択する方法 Javaスクリプト

作業前 Javaスクリプトはページ上のあらゆる要素を変更できますが、まず対象ノードを選択する必要があります。DOMには、それぞれ異なる状況に適した複数のセレクタメソッドが用意されています。

  • getElementById(): 指定された条件に一致する単一の要素を返します id 属性。
  • getElementsByClassName(): 指定されたクラスを持つすべての要素のライブHTMLCollectionを返します。
  • getElementsByTagName(): 指定されたタグ名を持つすべての要素のライブ HTMLCollection を返します。 p or li.
  • querySelector(): 任意のCSSセレクタに一致する最初の要素を返します。
  • querySelectorAll(): CSSセレクタに一致するすべての要素の静的なNodeListを返します。

以下の表は、最も一般的に使用されている4つの選別方法を比較したものです。これを参考に、目的に合った方法を選択してください。

方法 返品 最適な使用時期
getElementByIdを 単一要素 あなたはターゲットの正確で固有のIDを知っている。
getElementsByClassName ライブHTMLコレクション すべての要素が同じクラス名を共有する必要があります。
クエリセレクター 単一要素（最初の一致） idやclassだけでなく、任意のCSSセレクタを使用したい。
querySelectorAll 静的ノードリスト forEachを使って、一致するすべての項目をループ処理する必要があります。

querySelectorとquerySelectorAllは有効なCSSセレクタを受け入れるため、現代のコードにとって最も柔軟な選択肢となります。以下のスニペットを、要素を含むページで試してみてください。 id="title" そしていくつかの要素 class="item":

const heading = document.getElementById("title");
const itemsByClass = document.getElementsByClassName("item");
const firstItem = document.querySelector(".item");
const allItems = document.querySelectorAll(".item");
console.log(heading.textContent, itemsByClass.length, allItems.length);

getElementById と getElementsByClassName は単純な検索には高速ですが、属性セレクタや子孫セレクタなど、完全な CSS 構文のパワーが必要な選択ロジックの場合は、querySelector と querySelectorAll が推奨されます。

関連記事

DOM要素の変更、作成、削除方法

要素が選択されると、 Javaスクリプトは、その内容、属性、さらにはツリー内での存在を読み取ったり書き換えたりすることができます。DOM を使用すると、 Javaスクリプトは、新しい要素や属性を作成したり、既存の要素や属性を変更したり、既存の要素や属性を完全に削除したりすることができます。

getElementByIdとinnerHTMLを使用してコンテンツを変更する

  1. getElementById: ID が設定されている要素および属性にアクセスします。
  2. innerHTML: 要素のコンテンツにアクセスします。

この例を自分で試してみてください。

<html>
<head>
<title>DOM!!!</title>
</head>
<body>
<h1 id="one">Welcome</h1>
<p>This is the welcome message.</p>
<h2>Technology</h2>
<p>This is the technology section.</p>
<script type="text/javascript">
var text = document.getElementById("one").innerHTML;
alert("The first heading is " + text);
</script>
</body>
</html>

アラートボックスは、getElementByIdが見出しを見つけ、innerHTMLがその見出しの中に格納されているテキストを返したことを示しています。

getElementsByTagName を使用してすべての段落を読み込む

getElementsByTagName: タグ名を使用して要素と属性にアクセスします。 このメソッドは、 配列 同じタグ名を持つすべてのアイテムの。

この例を自分で試してみてください。

<html>
<head>
<title>DOM!!!</title>
</head>
<body>
<h1>Welcome</h1>
<p>This is the welcome message.</p>
<h2>Technology</h2>
<p id="second">This is the technology section.</p>
<script type="text/javascript">
var paragraphs = document.getElementsByTagName("p");
alert("Content in the second paragraph is " + paragraphs[1].innerHTML);
document.getElementById("second").innerHTML = "The orginal message is changed.";
</script>
</body>
</html>

getElementsByTagName はライブコレクションを返すため、paragraphs[1] はドキュメント内の 2 番目の段落を参照し、innerHTML を更新すると、画面上のテキストが即座に上書きされます。

createElementとremoveChildを使用して要素を作成および削除します。

DOMを使うと、ページに既に表示されている内容を変更するだけでなく、全く新しい要素を追加したり、既存の要素を削除したりすることもできます。

  • createElement(): メモリ上に新しい要素ノードを構築します。
  • appendChild(): ノードを親要素の最後の子要素として追加します。
  • setAttribute(): 属性を追加または更新する。 class or href要素上。
  • removeChild(): 指定された子ノードを親ノードから削除します。

以下の例では、新しいリスト項目を作成し、テキストとクラスを割り当て、既存のリストに追加した後、同じリストから最初の項目を削除します。

const list = document.getElementById("myList");
const newItem = document.createElement("li");
newItem.textContent = "Freshly added item";
newItem.setAttribute("class", "highlight");
list.appendChild(newItem);
list.removeChild(list.firstElementChild);

createElement() だけでは何も表示されません。ノードはメモリ上にのみ存在するためです。appendChild() や prepend() などの同様のメソッドによって、可視ツリー内のどこかにアタッチされて初めて表示されます。最新のブラウザでは、より短い node.remove() メソッドもサポートされています。これは、以前の parent.removeChild(node) 構文とは異なり、親への参照を必要とせずに要素を直接削除します。

イベントの処理方法 Javaスクリプト

イベントとは、クリック、キー入力、ページ読み込みなど、ブラウザが検出できるあらゆる動作のことです。特定の要素にイベントハンドラを追加するには、主に2つの方法があります。

onclick または addEventListener を使用してハンドラーをアタッチします

最初の、より古いアプローチでは、要素の onevent プロパティに関数を直接割り当てます。

document.getElementById(id).onclick=function()
{
lines of code to be executed
}

または、より現代的で柔軟な addEventListener() メソッドを使用する：

document.getElementById(id).addEventListener("click", functionname)

addEventListener() は、同じ要素の同じイベントに複数のハンドラをアタッチできるため、一般的に推奨されます。また、キャプチャを制御するオプションの 3 番目の引数を受け入れることができ、これについてはこのセクションで後ほど説明します。さらに、不要になったハンドラをデタッチする removeEventListener() と組み合わせて使用​​すると便利です。これは、onclick プロパティ単独ではできない機能です。

HTML は、タグに直接記述されたインライン ハンドラーという 3 番目のスタイルもサポートしています。 <button onclick="clicked()">Click Me</button>インラインハンドラーはマークアップとロジックを混在させ、すぐに保守が難しくなるため、ほとんどの場合 Javaスクリプト開発者はこれらを簡単なデモのために取っておき、実際のアプリケーションでは addEventListener() を使用します。

試してみよう：クリックイベントの完全な例

この例を自分で試してみてください。

<html>
<head>
<title>DOM!!!</title>
</head>
<body>
<input type="button" id="btnClick" value="Click Me!!" />
<script type="text/javascript">
document.getElementById("btnClick").addEventListener("click", clicked);
function clicked()
{
alert("You clicked me!!!");
}
</script>
</body>
</html>

ボタンをクリックすると clicked() 関数が起動し、 Javaイベントハンドラーが正常に実行されたことを確認するスクリプトアラートボックス。

イベントオブジェクト

すべてのイベントハンドラは、最初の引数としてイベントオブジェクトを自動的に受け取ります。このオブジェクトには、イベントが発生した際の有用な詳細情報が含まれています。例えば、event.target（アクションが発生した正確な要素）、event.type（「click」などのイベント名）、そしてevent.preventDefault()などのメソッドです。event.preventDefault()は、リンクをクリックしたりフォームを送信したりといったブラウザのデフォルトの動作を停止します。

document.getElementById("btnClick").addEventListener("click", function(event) {
console.log("Clicked element: " + event.target.id);
});

イベントオブジェクトにはさらに2つのプロパティがあります：event.currentTarget event.target がネストされた子要素を報告した場合でも、常にリスナーがアタッチされている要素を参照します。また、event.stopPropagation() は、イベントがそれ以上バブリングまたはキャプチャされる前にイベントを停止します。これらのツールは preventDefault() と組み合わせることで、ハンドラーが次に何が起こるかを正確に制御できるようになります。

イベント Bubbl情報収集、情報取得、および情報委譲

ネストされた要素でイベントが発生すると、そこで止まりません。 バブリング フェーズでは、イベントはターゲット要素から各祖先を経てドキュメントまで上方向に伝わります。 キャプチャ 最初に実行され、オプトイン方式であるフェーズでは、イベントはバブリングが始まる前にドキュメントからターゲットへと下方向に伝播します。 {capture: true} キャプチャフェーズ中にイベントをリッスンするために、addEventListener() の 3 番目の引数として指定します。

イベント委任 バブリングを利用します。各子要素に個別のリスナーをアタッチする代わりに、共通の親要素に1つのリスナーをアタッチし、event.targetを調べてどの子要素がトリガーしたかを判断します。これによりメモリ使用量が削減され、後からページに追加された要素も自動的にカバーされます。

const list = document.getElementById("myList");
list.addEventListener("click", function(event) {
  if (event.target.tagName === "LI") {
    alert("You clicked " + event.target.textContent);
  }
});

委譲は、バブリングやキャプチャリングと併せて、DOMとイベントの処理方法をきめ細かく制御します。 Javaスクリプトは、ページがよりインタラクティブになるにつれて反応します。

よくあるご質問

いいえ。HTMLはブラウザが解析する静的なマークアップであり、DOMはメモリ内のオブジェクトのライブツリーです。 Javaスクリプトはページ読み込み後に読み込んで変更できます。

addEventListener() の使用をお勧めします。このメソッドは、1つのイベントに対して複数のハンドラーを設定でき、キャプチャフェーズをサポートし、onclick で既に設定されているハンドラーを上書きしません。

Bubblingは、ターゲット要素からドキュメントへとイベントを伝達します。一方、キャプチャリングは先に実行され、ドキュメントからターゲットへと逆方向に移動します。

はい。 GitHubコパイロット できる tracハンドラーが発火しない理由を調べ、event.stopPropagation() の呼び出しが欠落している箇所を特定し、動的リストの委譲パターンを提案します。

はい。 AI言語モデルを活用してコードのデバッグからデータの異常検出まで、 また、GitHub Copilotは、平易な言葉で記述された内容からcreateElement、querySelector、addEventListenerのコードスニペットを作成できますが、出力結果はまだテストが必要です。

この投稿を要約すると次のようになります: