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開発技術の理解を深めます。