この実験では、参加者は JavaScript メソッドを使って DOM 要素を操作する強力な技術を探求します。包括的なチュートリアルでは、HTML ドキュメント構造の作成、ID による要素の選択、新しい要素の動的生成と追加、クラスセレクタを使ったスタイルの変更、およびインタラクティブな要素生成チャレンジの実装を通じて学習者を案内します。
参加者は、document.getElementById() のようなメソッド、.style プロパティの変更、document.createElement() による要素の作成、および動的コンテンツ管理など、必須の JavaScript DOM 操作技術に関する実践的な経験を得ます。段階的な指示に従うことで、学習者はコア JavaScript DOM メソッドを使って Web ページのコンテンツとインタラクティビティを変える実用的なスキルを身につけます。
このステップでは、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 を作成しました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");このステップでは、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 ループを使って要素を反復処理しますブラウザでの例の出力：
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);このインタラクティブなチャレンジの主な機能：
例のインタラクション：
この実験では、参加者は構造化された実践的なアプローチを通じて、JavaScript の基本的な DOM 操作技術を学びます。実験は、JavaScript との相互作用を容易にする一意の ID やクラスを含む、戦略的な要素配置による基本的な HTML ドキュメント構造を確立することから始まります。参加者は初期の HTML ファイルと対応する JavaScript ファイルを作成し、動的なウェブページ操作の基礎を築きます。
実験は、ID による要素の選択、スタイルの動的な変更、新しい要素の作成と追加、およびインタラクティブな要素生成の実装など、重要な DOM メソッドを通じて学習者を段階的に導きます。これらの実践的な課題を通じて、参加者は JavaScript を使って直接ウェブページ要素にアクセスして変換する能力を習得し、応答性とインタラクティブなウェブアプリケーションを作成するための重要なスキルを身につけます。
