はじめに
JavaScript DOM 操作の実験へようこそ。Document Object Model (DOM) は、ウェブドキュメントのためのプログラミングインターフェースです。これはページを表し、プログラムがドキュメントの構造、スタイル、コンテンツを変更できるようにします。ウェブページが読み込まれると、ブラウザはそのページの DOM を作成します。これはオブジェクトのツリーのような構造です。
この実験では、JavaScript を使用して DOM と対話する方法を学びます。要素の選択、コンテンツの変更、属性の変更、新しい要素の動的な作成とページへの追加を練習します。これらは、インタラクティブでダイナミックなウェブアプリケーションを作成するための基本的なスキルです。
この実験を完了すると、以下のことができるようになります。
- ID を使用して DOM から要素を選択する。
- 要素のコンテンツを変更する。
- 要素の属性を設定する。
- 新しい要素を作成する。
- 新しい要素をドキュメントに追加する。
始めましょう！
getElementById で ID による要素の選択
このステップでは、一意の ID を使用して HTML 要素を選択する方法を学びます。document.getElementById() メソッドは、DOM 内の特定の要素にアクセスするための最も一般的な方法の 1 つです。
まず、WebIDE の左側にあるファイルエクスプローラーで script.js ファイルを見つけます。それをクリックしてエディターで開きます。セットアップスクリプトがこのファイルを既に作成しています。
次に、script.js に以下のコードを追加します。このコードは、ID main-content を持つ div 要素を選択し、contentDiv という変数に格納します。その後、この要素をコンソールにログ出力して、正しく選択されたことを確認します。
const contentDiv = document.getElementById("main-content");
console.log(contentDiv);
コードを追加した後、script.js ファイルを保存します。結果を確認するには、インターフェースの上部にある「Web 8080」タブをクリックします。ページ自体に視覚的な変更はありませんが、console.log の出力を確認できます。これを行うには、ブラウザの開発者ツールを開きます（通常はページを右クリックして「検証」を選択し、「コンソール」タブに移動することで開けます）。コンソールに HTML の div 要素がログ出力されているはずです。
innerHTML でテキストコンテンツの変更
このステップでは、選択した要素のコンテンツを変更します。innerHTML プロパティを使用すると、要素内の HTML コンテンツを取得または設定できます。これは、ウェブページに表示される内容を動的に変更するための強力な方法です。
前のステップで書いたコードの下に、script.js ファイルの編集を続けます。以下の行を追加します。これにより、選択した div の中のテキストが変更されます。
const contentDiv = document.getElementById("main-content");
// This line is new
contentDiv.innerHTML = "The content has been changed by JavaScript!";
console.log(contentDiv);
script.js ファイルを保存してください。次に、「Web 8080」タブに戻ってページをリフレッシュします。ボックス内のテキストが「This is the original content.」から「The content has been changed by JavaScript!」に変更されているはずです。
setAttribute メソッドによる属性の設定
このステップでは、リンクの href や画像の src のような、要素の属性を変更する方法を学びます。この目的には setAttribute() メソッドが使用されます。このメソッドは 2 つの引数を取ります。1 つ目は設定する属性の名前、2 つ目はその属性に設定する値です。
私たちの index.html ファイルには、ID labex-link を持つリンク（<a> タグ）が含まれています。これを LabEx ウェブサイトを指すように href 属性を変更しましょう。
script.js ファイルに以下のコードを追加してください。
// Select the link element
const link = document.getElementById("labex-link");
// Set its href attribute
link.setAttribute("href", "https://labex.io");
これで、script.js ファイル全体は以下のようになります。
const contentDiv = document.getElementById("main-content");
contentDiv.innerHTML = "The content has been changed by JavaScript!";
console.log(contentDiv);
// Select the link element
const link = document.getElementById("labex-link");
// Set its href attribute
link.setAttribute("href", "https://labex.io");
ファイルを保存し、「Web 8080」タブに切り替えてリフレッシュしてください。「LabEx」リンクにカーソルを合わせると、ブラウザのステータスバーに https://labex.io を指していることが表示されるはずです。クリックすると、そのページに移動しようとします。
createElement による新規要素の作成
このステップでは、JavaScript を使用して、まったく新しい HTML 要素を一から作成します。これは動的なインターフェースを構築する上で中心的な部分であり、リストに新しい項目を追加したり、新しいメッセージを表示したりする必要がある場合などに使用されます。document.createElement() メソッドは、タグ名で指定された要素を作成するために使用されます。
新しい段落（<p>）要素を作成しましょう。以下のコードを script.js ファイルの末尾に追加してください。
// Create a new paragraph element
const newParagraph = document.createElement("p");
// Set its content
newParagraph.innerHTML = "This is a new paragraph created with JavaScript.";
// Add a class for styling
newParagraph.className = "new-element";
この時点では、要素はブラウザのメモリ内に作成されていますが、まだページ上には表示されていません。要素を作成し、innerHTML を使用してそのコンテンツを設定し、CSS クラスを割り当てたため、style.css ファイルに従ってスタイルが適用されます。次のステップでは、この新しい要素をドキュメントに追加する方法を学びます。
appendChild による子要素の追加
この最終ステップでは、前のステップで作成した要素をウェブページに追加します。appendChild() メソッドは、ノード（要素）を親要素の最後の子供として追加します。
まず、新しい段落を配置したい親要素を選択する必要があります。私たちの index.html には、この目的のために ID container を持つ div があります。次に、appendChild() を使用して newParagraph をそれに（子として）追加します。
以下のコードを script.js の末尾に追加してください。
// Get the container element
const container = document.getElementById("container");
// Append the new paragraph to the container
container.appendChild(newParagraph);
これで、script.js ファイル全体に、前のステップからのすべてのコードが含まれるようになります。ファイルを保存し、「Web 8080」タブをリフレッシュしてください。ページ上のリンクの下に、新しくスタイルが適用された段落が表示されるはずです。
おめでとうございます！DOM を操作してコンテンツを変更し、属性を設定し、新しい要素を動的に作成して表示することに成功しました。
まとめ
この実験では、JavaScript を使用して Document Object Model (DOM) を操作するための基本的なテクニックを学びました。これらのスキルは、動的でインタラクティブなウェブページを作成するために不可欠です。
以下の操作を実際に練習しました。
document.getElementById()を使用した DOM からの要素の選択。innerHTMLプロパティを使用した要素コンテンツの変更。setAttribute()メソッドを使用した要素の属性の変更。document.createElement()を使用したメモリ内での新しい HTML 要素の作成。appendChild()を使用した新しく作成された要素のウェブページへの追加。
これらのメソッドを組み合わせることで、ユーザーのアクションに応答し、データを動的に表示する複雑なユーザーインターフェースを構築できます。この実験の完了、おめでとうございます！
