LabEx
ログイン登録

JavaScript メソッドを使って DOM 要素を操作する

JavaScriptBeginner
オンラインで実践に進む

はじめに

この実験では、参加者は JavaScript メソッドを使って DOM 要素を操作する強力な技術を探求します。包括的なチュートリアルでは、HTML ドキュメント構造の作成、ID による要素の選択、新しい要素の動的生成と追加、クラスセレクタを使ったスタイルの変更、およびインタラクティブな要素生成チャレンジの実装を通じて学習者を案内します。

参加者は、document.getElementById() のようなメソッド、.style プロパティの変更、document.createElement() による要素の作成、および動的コンテンツ管理など、必須の JavaScript DOM 操作技術に関する実践的な経験を得ます。段階的な指示に従うことで、学習者はコア JavaScript DOM メソッドを使って Web ページのコンテンツとインタラクティビティを変える実用的なスキルを身につけます。

HTML ドキュメント構造を設定する

このステップでは、JavaScript DOM 操作実験の基礎となる基本的な HTML ドキュメント構造を作成する方法を学びます。JavaScript を使って相互作用する必須要素を持つ簡単な HTML ファイルを設定します。

WebIDE を開き、~/project ディレクトリに移動します。ファイルエクスプローラで右クリックして「新しいファイル」を選択することで、index.html という新しいファイルを作成します。

作成する基本的な HTML 構造は以下の通りです。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>DOM Manipulation Lab</title>
  </head>
  <body>
    <div id="container">
      <h1 id="main-title">Welcome to DOM Manipulation</h1>
      <p class="description">
        This is a practice page for JavaScript DOM methods.
      </p>
      <div id="dynamic-content"></div>
    </div>

    <script src="script.js"></script>
  </body>
</html>

重要なコンポーネントを分解してみましょう。

  • <!DOCTYPE html> はこれが HTML5 ドキュメントであることを宣言します
  • メインコンテナと重要な要素に id を付けました
  • 段落に class を追加しました
  • 後で操作するために、id="dynamic-content" の空の div を作成しました
  • 外部の JavaScript ファイル script.js をリンクしました

この HTML ファイルをブラウザで開いたときの例の出力は以下の通りです。

Welcome to DOM Manipulation
This is a practice page for JavaScript DOM methods.

次に、同じディレクトリに対応する JavaScript ファイル script.js を作成します。

// Initial JavaScript file for DOM manipulation
console.log("HTML document is ready for DOM manipulation");

ID を使って要素を選択してスタイルを変更する

このステップでは、HTML 要素を ID を使って選択し、JavaScript を使ってそれらのスタイルを変更する方法を学びます。前のステップで作成した WebIDE の script.js ファイルを開きます。

要素を選択するには document.getElementById() メソッドを、それらの外観を変更するには .style プロパティを使います。script.js を以下のコードで更新します。

// Select elements by ID
const mainTitle = document.getElementById("main-title");
const container = document.getElementById("container");

// Modify styles directly
mainTitle.style.color = "blue";
mainTitle.style.fontSize = "24px";
mainTitle.style.textAlign = "center";

// Modify container styles
container.style.backgroundColor = "#f0f0f0";
container.style.padding = "20px";
container.style.borderRadius = "10px";

このコードが何をするか分解してみましょう。

  • document.getElementById() は特定の ID を持つ要素を見つけます
  • .style プロパティは直接のスタイル変更を可能にします
  • メインタイトルの色、フォントサイズ、およびアライメントを変更します
  • コンテナに背景色、パディング、および角丸を追加します

ブラウザでの例の出力は以下の通りです。

  • メインタイトルは青になり、中央揃えになり、大きくなります
  • コンテナは角丸の薄い灰色の背景を持つようになります

変更を確認するには、ブラウザで index.html ファイルを開くか、WebIDE のブラウザプレビューを使います。

新しい要素を動的に作成して追加する

このステップでは、JavaScript を使って新しい HTML 要素を動的に作成し、既存のドキュメントに追加する方法を学びます。WebIDE の script.js ファイルを開き、以下のコードを追加します。

// Select the dynamic content container
const dynamicContent = document.getElementById("dynamic-content");

// Create new elements
const newParagraph = document.createElement("p");
const newButton = document.createElement("button");

// Set content and attributes
newParagraph.textContent = "This paragraph was created dynamically!";
newParagraph.style.color = "green";

newButton.textContent = "Click Me";
newButton.style.backgroundColor = "lightblue";
newButton.style.padding = "10px";

// Append elements to the dynamic content container
dynamicContent.appendChild(newParagraph);
dynamicContent.appendChild(newButton);

// Add an event listener to the button
newButton.addEventListener("click", () => {
  alert("Dynamic button was clicked!");
});

重要なメソッドを分解してみましょう。

  • document.createElement() は新しい HTML 要素を作成します
  • .textContent は要素のテキストを設定します
  • .appendChild() は新しい要素を DOM に追加します
  • .addEventListener() は要素にインタラクティビティを追加します

ブラウザでの例の出力は以下の通りです。

  • 「この段落は動的に作成されました！」というテキストの緑色の段落
  • 「クリックしてください」と書かれた薄い青色のボタン
  • ボタンをクリックするとアラートが表示されます

index.html ファイルを開くと、新しく作成された要素がページに追加されているのがわかります。

クラスセレクタを使って要素を変更する

このステップでは、JavaScript においてクラスセレクタを使って要素を選択し変更する方法を学びます。index.html を更新して、同じクラスを持つ複数の要素を含めます。

<div id="container">
  <h1 id="main-title">Welcome to DOM Manipulation</h1>
  <p class="description">First description paragraph</p>
  <p class="description">Second description paragraph</p>
  <div id="dynamic-content"></div>
</div>

次に、script.js を変更してクラスセレクタを使うようにします。

// Select all elements with the 'description' class
const descriptionElements = document.getElementsByClassName("description");

// Loop through the elements and modify their styles
for (let element of descriptionElements) {
  element.style.fontStyle = "italic";
  element.style.color = "darkgreen";
  element.style.backgroundColor = "#f0f0f0";
  element.style.padding = "10px";
  element.style.margin = "5px 0";
}

// Alternative method using querySelector
const firstDescription = document.querySelector(".description");
firstDescription.textContent = "Modified first description using querySelector";

示されている重要なメソッド：

  • document.getElementsByClassName() は要素のコレクションを返します
  • document.querySelector() は最初の一致する要素を選択します
  • for...of ループを使って要素を反復処理します
  • 複数の要素のスタイルを同時に変更します

ブラウザでの例の出力：

  • 斜体で暗緑色のテキストを持つ 2 つの段落
  • 説明段落の薄い灰色の背景
  • 最初の説明文が変更されている

index.html ファイルを開くと、スタイル付けされ変更された説明段落が表示されます。

インタラクティブな要素生成の課題を実装する

この最後のステップでは、ユーザーが要素を動的に生成できるインタラクティブなチャレンジを作成します。index.html を更新して、入力欄とボタンを追加します。

<div id="container">
  <h2>Dynamic Element Generator</h2>
  <input type="text" id="elementInput" placeholder="Enter element text" />
  <select id="elementType">
    <option value="p">Paragraph</option>
    <option value="h3">Heading</option>
    <option value="div">Div</option>
  </select>
  <button id="generateButton">Generate Element</button>
  <div id="output-container"></div>
</div>

次に、script.js をインタラクティブな要素生成ロジックで更新します。

// Select key elements
const elementInput = document.getElementById("elementInput");
const elementTypeSelect = document.getElementById("elementType");
const generateButton = document.getElementById("generateButton");
const outputContainer = document.getElementById("output-container");

// Element generation function
function generateElement() {
  // Get input values
  const text = elementInput.value;
  const type = elementTypeSelect.value;

  // Check if input is not empty
  if (text.trim() === "") {
    alert("Please enter some text");
    return;
  }

  // Create new element
  const newElement = document.createElement(type);
  newElement.textContent = text;

  // Style the new element
  newElement.style.margin = "10px 0";
  newElement.style.padding = "10px";
  newElement.style.backgroundColor = getRandomColor();

  // Add a remove button to each generated element
  const removeButton = document.createElement("button");
  removeButton.textContent = "Remove";
  removeButton.style.marginLeft = "10px";
  removeButton.addEventListener("click", () => {
    outputContainer.removeChild(newElement);
  });

  // Append element and remove button
  newElement.appendChild(removeButton);
  outputContainer.appendChild(newElement);

  // Clear input
  elementInput.value = "";
}

// Helper function to generate random color
function getRandomColor() {
  const letters = "0123456789ABCDEF";
  let color = "#";
  for (let i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

// Add event listener to generate button
generateButton.addEventListener("click", generateElement);

このインタラクティブなチャレンジの主な機能：

  • ユーザー入力に基づく動的な要素作成
  • 要素の種類を選択できる機能
  • 各要素にランダムな背景色を設定
  • 個々の要素を削除するオプション
  • 入力バリデーション

例のインタラクション：

  1. 入力欄に "Hello World" を入力
  2. 要素の種類を選択（例：段落）
  3. 「要素を生成」をクリック
  4. ランダムな背景色の新しい段落が表示される
  5. 「削除」をクリックして要素を削除する

まとめ

この実験では、参加者は構造化された実践的なアプローチを通じて、JavaScript の基本的な DOM 操作技術を学びます。実験は、JavaScript との相互作用を容易にする一意の ID やクラスを含む、戦略的な要素配置による基本的な HTML ドキュメント構造を確立することから始まります。参加者は初期の HTML ファイルと対応する JavaScript ファイルを作成し、動的なウェブページ操作の基礎を築きます。

実験は、ID による要素の選択、スタイルの動的な変更、新しい要素の作成と追加、およびインタラクティブな要素生成の実装など、重要な DOM メソッドを通じて学習者を段階的に導きます。これらの実践的な課題を通じて、参加者は JavaScript を使って直接ウェブページ要素にアクセスして変換する能力を習得し、応答性とインタラクティブなウェブアプリケーションを作成するための重要なスキルを身につけます。

関連 JavaScript コース
初心者向け JavaScript

初心者向け JavaScript

javascriptweb-development
三目並べウェブアプリを作成する

三目並べウェブアプリを作成する

javascriptweb-development
モグラたたき Web ゲームの作成

モグラたたき Web ゲームの作成

javascriptweb-development