JavaScript で DOM プロパティを探索する

はじめに

この実験では、参加者はインタラクティブな HTML ドキュメントを作成し、JavaScript を使ってさまざまなドキュメント属性にアクセスして操作することで、JavaScript におけるドキュメントオブジェクトモデル（DOM）のプロパティを探ります。この実験では、ドキュメントのタイトル、URL、リンク、画像、本文コンテンツなどの重要な DOM プロパティを理解するための実践的なアプローチを提供します。

段階的なプロセスを通じて、学習者はまず基本的な HTML 構造を作成し、次に徐々に JavaScript を使ってさまざまなドキュメントプロパティと相互作用させます。ドキュメントのタイトルにアクセスする方法、URL とリンクを取得する方法、画像を数える方法、ドキュメントの本文とクッキーのプロパティを調べる方法などを検討することで、参加者は JavaScript がどのように Web ページ要素とメタデータと動的に相互作用するかについての実践的な洞察を得るでしょう。

基本構造を持つ HTML ドキュメントを作成する

このステップでは、JavaScript における DOM プロパティを探るための基礎となる基本的な HTML ドキュメントを作成する方法を学びます。WebIDE を使って、必須要素を含む単純な構造の HTML ファイルを作成します。

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

次に、以下の HTML コードをコピーして index.html ファイルに貼り付けます。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>DOM Properties Exploration</title>
  </head>
  <body>
    <h1>Welcome to DOM Properties Lab</h1>
    <p>This page will help us explore JavaScript DOM properties.</p>
    <img src="https://example.com/sample-image.jpg" alt="Sample Image" />
    <img src="https://example.com/another-image.jpg" alt="Another Image" />
  </body>
</html>

この HTML ドキュメントの主要なコンポーネントを分解してみましょう。

<!DOCTYPE html> はこれを HTML5 ドキュメントとして宣言します
<html lang="en"> はドキュメントの言語を設定します
<head> はドキュメントに関するメタデータを含みます
<title> はページのタイトルを設定し、後のステップで使用します
<body> はページの表示可能なコンテンツを含みます
後続のステップで画像に関連する DOM プロパティを示すために、2 つの <img> タグを含めています

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

[A webpage with the title "DOM Properties Exploration"
 displaying "Welcome to DOM Properties Lab"
 and "This page will help us explore JavaScript DOM properties."]

この単純な HTML 構造は、私たちの DOM プロパティ探索実験の完璧な出発点を提供します。

ドキュメントのタイトルプロパティにアクセスする

このステップでは、JavaScript を使ってドキュメントのタイトルプロパティにアクセスする方法を学びます。前のステップで作成した HTML ファイルを基に、ドキュメントのタイトルを取得して操作する方法を示します。

WebIDE を使って ~/project ディレクトリに script.js という新しいファイルを作成します。以下の JavaScript コードを追加します。

// ドキュメントのタイトルにアクセスする
console.log("Document Title:", document.title);

// ドキュメントのタイトルを変更する
function changeTitle() {
  document.title = "Updated DOM Properties Lab";
  console.log("New Document Title:", document.title);
}

// タイトルの変更を示すボタンを追加する
const button = document.createElement("button");
button.textContent = "Change Title";
button.onclick = changeTitle;
document.body.appendChild(button);

次に、JavaScript ファイルを含めるように index.html ファイルを更新します。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>DOM Properties Exploration</title>
  </head>
  <body>
    <h1>Welcome to DOM Properties Lab</h1>
    <p>This page will help us explore JavaScript DOM properties.</p>
    <img src="https://example.com/sample-image.jpg" alt="Sample Image" />
    <img src="https://example.com/another-image.jpg" alt="Another Image" />

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

この HTML ファイルをブラウザで開くと、以下の動作が見られます。

ブラウザのコンソールに表示される例の出力：

Document Title: DOM Properties Exploration

「Change Title」ボタンをクリックすると：

New Document Title: Updated DOM Properties Lab

示される重要な概念：

document.title プロパティは、現在のページのタイトルを取得します
JavaScript を使ってドキュメントのタイトルを動的に変更できます
タイトルはブラウザのタブに表示され、実行時に変更できます

ドキュメントの URL とリンクを取得する

このステップでは、JavaScript DOM プロパティを使ってドキュメントの URL にアクセスし、リンクに関する情報を取得する方法を学びます。これらの機能を示すために、 script.js ファイルを更新します。

WebIDE で script.js ファイルを開き、以下のコードを追加します。

// 現在のドキュメントの URL を取得して表示する
console.log("Current Document URL:", document.URL);

// ページ上のリンクの数を取得する
const linkCount = document.links.length;
console.log("Total Number of Links:", linkCount);

// すべてのリンクに関する情報を表示する
function displayLinkInfo() {
  const links = document.links;
  console.log("Link Information:");
  for (let i = 0; i < links.length; i++) {
    console.log(`Link ${i + 1}:`);
    console.log(`  Href: ${links[i].href}`);
    console.log(`  Text: ${links[i].text}`);
  }
}

// リンクの情報を表示するボタンを追加する
const linkButton = document.createElement("button");
linkButton.textContent = "Show Link Details";
linkButton.onclick = displayLinkInfo;
document.body.appendChild(linkButton);

いくつかの追加のリンクを含めるように index.html ファイルを更新します。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>DOM Properties Exploration</title>
  </head>
  <body>
    <h1>Welcome to DOM Properties Lab</h1>
    <p>This page will help us explore JavaScript DOM properties.</p>

    <div>
      <a href="https://example.com">Example Website</a>
      <a href="https://labex.io">LabEx Learning Platform</a>
    </div>

    <img src="https://example.com/sample-image.jpg" alt="Sample Image" />
    <img src="https://example.com/another-image.jpg" alt="Another Image" />

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

ブラウザのコンソールに表示される例の出力：

Current Document URL: file:///home/labex/project/index.html
Total Number of Links: 2

Link Information:
Link 1:
  Href: https://example.com
  Text: Example Website
Link 2:
  Href: https://labex.io
  Text: LabEx Learning Platform

示される重要な概念：

document.URL は現在のドキュメントの完全な URL を取得します
document.links はページ上のすべてのリンクのコレクションを提供します
リンクを反復処理して、 href や text などのそれらのプロパティにアクセスできます

ページ上の画像をカウントして表示する

このステップでは、JavaScript DOM プロパティを使って Web ページ上の画像を数え、画像に関する情報を表示する方法を学びます。画像に関連する機能を調べるために、 script.js ファイルを更新します。

WebIDE で script.js ファイルを開き、以下のコードを追加します。

// ページ上の画像の数を数える
const imageCount = document.images.length;
console.log("Total Number of Images:", imageCount);

// 画像の詳細を表示する関数
function displayImageInfo() {
  const images = document.images;
  console.log("Image Information:");
  for (let i = 0; i < images.length; i++) {
    console.log(`Image ${i + 1}:`);
    console.log(`  Source: ${images[i].src}`);
    console.log(`  Alt Text: ${images[i].alt}`);
  }
}

// 画像の詳細を表示するボタンを作成する
const imageButton = document.createElement("button");
imageButton.textContent = "Show Image Details";
imageButton.onclick = displayImageInfo;
document.body.appendChild(imageButton);

// 簡単な画像情報表示エリアを追加する
const infoDiv = document.createElement("div");
infoDiv.id = "image-info";
document.body.appendChild(infoDiv);

// 画像の数で div を更新する
infoDiv.textContent = `Number of Images: ${imageCount}`;

さまざまな属性を持つ画像を含めるように index.html ファイルを更新します。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>DOM Properties Exploration</title>
  </head>
  <body>
    <h1>Welcome to DOM Properties Lab</h1>
    <p>This page will help us explore JavaScript DOM properties.</p>

    <div>
      <a href="https://example.com">Example Website</a>
      <a href="https://labex.io">LabEx Learning Platform</a>
    </div>

    <div id="image-container">
      <img src="https://example.com/sample-image.jpg" alt="Sample Image" />
      <img src="https://example.com/another-image.jpg" alt="Another Image" />
      <img src="https://example.com/third-image.png" alt="Third Image" />
    </div>

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

ブラウザのコンソールに表示される例の出力：

Total Number of Images: 3
Image Information:
Image 1:
  Source: https://example.com/sample-image.jpg
  Alt Text: Sample Image
Image 2:
  Source: https://example.com/another-image.jpg
  Alt Text: Another Image
Image 3:
  Source: https://example.com/third-image.png
  Alt Text: Third Image

示される重要な概念：

document.images はページ上のすべての画像のコレクションを提供します
src や alt などの画像のプロパティにアクセスできます
JavaScript を使ってページ要素を動的に作成して操作します

ドキュメントのボディとクッキーのプロパティを示す

このステップでは、JavaScript におけるドキュメントのボディとクッキーのプロパティを調べ、ページコンテンツを操作してブラウザのクッキーを使う方法を学びます。

WebIDE で script.js ファイルを開き、以下のコードを追加します。

// ドキュメントのボディの操作を示す
function modifyBodyContent() {
  // ドキュメントのボディにアクセスして操作する
  const body = document.body;
  console.log("Original Body Inner HTML:", body.innerHTML);

  // 新しい段落要素を作成する
  const newParagraph = document.createElement("p");
  newParagraph.textContent = "この段落はボディに動的に追加されました！";
  body.appendChild(newParagraph);

  console.log("Updated Body Inner HTML:", body.innerHTML);
}

// クッキーのプロパティを示す
function manageCookies() {
  // 新しいクッキーを設定する
  document.cookie =
    "labExperience=JavaScript DOM; expires=Fri, 31 Dec 2023 23:59:59 GMT; path=/";

  // すべてのクッキーを表示する
  console.log("Current Cookies:", document.cookie);

  // クッキーを表示するボタンを作成する
  const cookieButton = document.createElement("button");
  cookieButton.textContent = "Show Cookies";
  cookieButton.onclick = () => {
    alert(`Cookies: ${document.cookie}`);
  };
  document.body.appendChild(cookieButton);
}

// デモをトリガーするボタンを作成する
const bodyButton = document.createElement("button");
bodyButton.textContent = "Modify Body Content";
bodyButton.onclick = modifyBodyContent;
document.body.appendChild(bodyButton);

const cookieButton = document.createElement("button");
cookieButton.textContent = "Manage Cookies";
cookieButton.onclick = manageCookies;
document.body.appendChild(cookieButton);

互換性を確認するために index.html ファイルを更新します。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>DOM Properties Exploration</title>
  </head>
  <body>
    <h1>Welcome to DOM Properties Lab</h1>
    <p>このページは、JavaScript DOM のプロパティを調べるのに役立ちます。</p>

    <div>
      <a href="https://example.com">Example Website</a>
      <a href="https://labex.io">LabEx Learning Platform</a>
    </div>

    <div id="image-container">
      <img src="https://example.com/sample-image.jpg" alt="Sample Image" />
      <img src="https://example.com/another-image.jpg" alt="Another Image" />
      <img src="https://example.com/third-image.png" alt="Third Image" />
    </div>

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

ブラウザのコンソールに表示される例の出力：

// "Modify Body Content" をクリックした後
Original Body Inner HTML: [初期のHTMLコンテンツ]
Updated Body Inner HTML: [新しい段落が追加されたHTMLコンテンツ]

// "Manage Cookies" をクリックした後
Current Cookies: labExperience=JavaScript DOM

示される重要な概念：

document.body にアクセスして変更する
新しい要素を動的に作成して追加する
ブラウザのクッキーを設定して読み取る
JavaScript を使ってドキュメントのプロパティとやり取りする

まとめ

この実験では、参加者は構造化された HTML ドキュメントを作成し、さまざまなプロパティアクセス技術を実装することで、JavaScript を使ってドキュメントオブジェクトモデル（DOM）のプロパティを調べる方法を学びます。この実験は、タイトル、ボディ、画像などの必須要素を含む基本的な HTML ファイルを構築することから始まり、DOM の相互作用を理解するための基盤となります。

実践演習では、参加者に対してタイトル、URL、リンク、画像数などのさまざまなドキュメントプロパティにアクセスする方法を学ばせ、JavaScript がどのように動的に Web ページのメタデータを取得して操作するかを示します。これらの手順を通じて、参加者は基本的な DOM プロパティを調べ、相互作用する実践的な経験を得ることができ、クライアントサイドの Web 開発技術の理解を深めます。