基礎から学ぶJavaScript入門 90日コース | Webページを操作するDOM － Day 32：要素の取得

90日で身につけるJavaScript

2026.08.27

Day 32：要素の取得（前半）
要素取得の基本：まず「document」からスタートする
1. なぜ「document」なのか
getElementById()：一番シンプルでよく使う入口
querySelector()：CSSセレクタで「1つだけ」要素を取得
querySelectorAll()：CSSセレクタで「複数の要素」をまとめて取得
3つのメソッドの使い分けイメージ
1. ざっくりした使い分け
2. セキュリティ・安全性の観点での注意
実践：HTML要素を取得して操作するミニアプリ
Day 32 前半のまとめ
Day 32：要素の取得（後半）
要素取得＋操作の基本パターンをもう一度整理する
実践①：入力フォームから値を取得して表示する
実践②：リストの見た目を一括で変更する
実践③：querySelectorで“特定の場所の要素”だけを操作する
セキュリティ・安全性の観点からの補足
1. textContent を基本にする理由
Day 32 後半練習用総合テンプレート
Day 32 後半のまとめ

Day 32：要素の取得（前半）

「JavaScriptで“どのHTMLを触るか”を正確に指定する」

Day 32では、DOM操作の中でも超重要なテーマである 「要素の取得」 を扱います。 WebページをJavaScriptで動かすとき、最初に必ずやることは、

「どのHTML要素を操作するのか」を特定すること

です。

そのために使うのが、

getElementById()
querySelector()
querySelectorAll()

という3つのメソッドです。

ここでは、それぞれの特徴と使い分けを、初心者向けにかみ砕いて、実際のHTMLとセットで説明していきます。

要素取得の基本：まず「document」からスタートする

なぜ「document」なのか

JavaScriptがDOMにアクセスするときの入口は、常に document です。

console.log(document);

console.log(document);

JavaScript

document は「今表示しているページ全体」を表すオブジェクトです。
その中にあるHTML要素を探すためのメソッドとして、 getElementById() や querySelector() などが用意されています。

要素取得は、 「documentからスタートして、条件に合う要素を探す」 という流れだとイメージすると理解しやすいです。

getElementById()：一番シンプルでよく使う入口

役割と特徴

getElementById() は、

「id属性が一致する要素を1つだけ取得する」

ためのメソッドです。

const element = document.getElementById('myId');

const element = document.getElementById('myId');

JavaScript

引数：文字列（HTMLの id 属性の値）
戻り値：該当する要素があればそのDOM要素、なければ null

HTMLとセットで見る例

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>getElementByIdの基本</title>
</head>
<body>
  <h1 id="mainTitle">こんにちは、getElementById</h1>
  <p id="description">このテキストはJavaScriptから変更できます。</p>

  <script>
    // id="mainTitle" の要素を取得します
    const titleElement = document.getElementById('mainTitle');

    // id="description" の要素を取得します
    const descriptionElement = document.getElementById('description');

    // 取得した要素のテキストをコンソールに表示します
    console.log('タイトル:', titleElement.textContent);
    console.log('説明文:', descriptionElement.textContent);

    // テキストを書き換えてみます
    titleElement.textContent = 'getElementByIdでタイトルを書き換えました';
    descriptionElement.textContent = '説明文もgetElementByIdで変更しました。';
  </script>
</body>
</html>

重要ポイント

id はページ内で 一意（ユニーク） にするのが基本です。
「この要素は絶対に1つだけ」というもの（メインタイトル、メインコンテンツなど）に向いています。
シンプルで分かりやすいので、初心者にとって最初のDOM取得メソッドとして最適です。

querySelector()：CSSセレクタで「1つだけ」要素を取得

役割と特徴

querySelector() は、

「CSSセレクタで指定した条件に合う要素のうち、最初の1つだけを取得する」

ためのメソッドです。

const element = document.querySelector('p');          // 最初の<p>要素
const element2 = document.querySelector('.item');     // class="item" の最初の要素
const element3 = document.querySelector('#mainTitle'); // id="mainTitle" の要素

const element = document.querySelector('p');          // 最初の<p>要素
const element2 = document.querySelector('.item');     // class="item" の最初の要素
const element3 = document.querySelector('#mainTitle'); // id="mainTitle" の要素

JavaScript

引数：CSSセレクタ（文字列）
戻り値：条件に合う最初の要素、なければ null

HTMLとセットで見る例

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>querySelectorの基本</title>
</head>
<body>
  <h1 id="mainTitle">querySelectorの練習</h1>
  <p class="message">1つ目のメッセージです。</p>
  <p class="message">2つ目のメッセージです。</p>

  <script>
    // CSSセレクタで要素を取得します

    // idセレクタ（#mainTitle）
    const titleElement = document.querySelector('#mainTitle');

    // クラスセレクタ（.message） → 最初の1つだけ取得
    const firstMessageElement = document.querySelector('.message');

    // タグセレクタ（p） → 最初の<p>要素だけ取得
    const firstParagraphElement = document.querySelector('p');

    console.log('タイトル:', titleElement.textContent);
    console.log('最初の.message:', firstMessageElement.textContent);
    console.log('最初の<p>:', firstParagraphElement.textContent);

    // 最初の.messageのテキストを書き換えます
    firstMessageElement.textContent = 'querySelectorで最初の.messageを書き換えました';
  </script>
</body>
</html>

重要ポイント

querySelector() は CSSセレクタをそのまま使える のが強みです。
#id名、.クラス名、タグ名、div > p、ul li.item など、柔軟な指定ができます。
ただし「最初の1つだけ」なので、複数の要素をまとめて扱いたいときは querySelectorAll() を使います。

querySelectorAll()：CSSセレクタで「複数の要素」をまとめて取得

役割と特徴

querySelectorAll() は、

「CSSセレクタで指定した条件に合う要素を“全部”取得する」

ためのメソッドです。

const elements = document.querySelectorAll('.item');

const elements = document.querySelectorAll('.item');

JavaScript

引数：CSSセレクタ（文字列）
戻り値：条件に合う要素の NodeList（配列に似たオブジェクト）

HTMLとセットで見る例

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>querySelectorAllの基本</title>
</head>
<body>
  <ul>
    <li class="item">商品A</li>
    <li class="item">商品B</li>
    <li class="item">商品C</li>
  </ul>

  <script>
    // .itemクラスを持つ要素をすべて取得します
    const itemElements = document.querySelectorAll('.item');

    console.log('itemElementsの数:', itemElements.length);

    // 1つずつ取り出してテキストをコンソールに表示します
    itemElements.forEach(function (element, index) {
      console.log(`item ${index}:`, element.textContent);
    });

    // すべての.itemのテキストの前に「★」を付けてみます
    itemElements.forEach(function (element) {
      element.textContent = '★ ' + element.textContent;
    });
  </script>
</body>
</html>

重要ポイント

querySelectorAll() の戻り値は NodeList で、forEach() が使えます。
「同じクラスを持つ要素をまとめて操作したい」ときに非常に便利です。
例えば「すべてのメニュー項目」「すべてのカード」「すべてのエラー表示」などに一括でスタイルやテキストを適用できます。

3つのメソッドの使い分けイメージ

ざっくりした使い分け

getElementById()
- 「このページに1つだけある“特別な要素”」を取るとき
- 例：メインタイトル、メインコンテンツ、メインボタンなど
querySelector()
- 「CSSセレクタで柔軟に指定したいけれど、1つだけ取れればよい」とき
- 例：最初の .error、特定の div 内の p など
querySelectorAll()
- 「同じ条件に合う要素を全部まとめて操作したい」とき
- 例：すべての .item、すべての .active、すべての .error など

セキュリティ・安全性の観点での注意

取得した要素に対して innerHTML を不用意に書き換えると、ユーザー入力をそのままHTMLとして解釈してしまい、 XSS（クロスサイトスクリプティング）の原因になることがあります。
初心者の段階では、テキストの変更には textContent を使う ことを基本にすると安全です。

実践：HTML要素を取得して操作するミニアプリ

Day 32前半の内容をまとめて体験できるテンプレートを用意します。 3つのメソッドを使って、画面上のテキストを変更してみます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 32 前半：要素の取得 練習テンプレート</title>
</head>
<body>
  <h1 id="pageTitle">要素の取得練習ページ</h1>

  <p class="message">1つ目のメッセージです。</p>
  <p class="message">2つ目のメッセージです。</p>
  <p class="message">3つ目のメッセージです。</p>

  <button id="changeTitleButton">タイトルを変更</button>
  <button id="changeFirstMessageButton">最初のメッセージを変更</button>
  <button id="changeAllMessagesButton">すべてのメッセージを変更</button>

  <script>
    // getElementByIdでタイトル要素を取得します
    const pageTitleElement = document.getElementById('pageTitle');

    // querySelectorで最初の.message要素を取得します
    const firstMessageElement = document.querySelector('.message');

    // querySelectorAllですべての.message要素を取得します
    const messageElements = document.querySelectorAll('.message');

    // ボタン要素を取得します
    const changeTitleButton = document.getElementById('changeTitleButton');
    const changeFirstMessageButton = document.getElementById('changeFirstMessageButton');
    const changeAllMessagesButton = document.getElementById('changeAllMessagesButton');

    // タイトルを変更するボタンのイベント
    changeTitleButton.addEventListener('click', function () {
      pageTitleElement.textContent = 'getElementByIdでタイトルを変更しました';
      console.log('タイトルを変更しました。');
    });

    // 最初のメッセージを変更するボタンのイベント
    changeFirstMessageButton.addEventListener('click', function () {
      firstMessageElement.textContent = 'querySelectorで取得した最初のメッセージを変更しました';
      console.log('最初の.messageを変更しました。');
    });

    // すべてのメッセージを変更するボタンのイベント
    changeAllMessagesButton.addEventListener('click', function () {
      messageElements.forEach(function (element, index) {
        element.textContent = `querySelectorAllで取得したメッセージ ${index + 1} を変更しました`;
      });
      console.log('すべての.messageを変更しました。');
    });
  </script>
</body>
</html>

このテンプレートで、

それぞれのボタンをクリックして、画面の変化を確認する
開発者ツールのコンソールでログを確認する
getElementById / querySelector / querySelectorAll がどの要素を対象にしているかを意識する

ことで、「要素取得 → 操作」というDOMの基本パターンが体に馴染んでいきます。

Day 32 前半のまとめ

Day 32前半では、

要素取得は「documentからスタートして、条件に合う要素を探す」流れであること
getElementById() は「idで1つだけ」を取る、シンプルでよく使うメソッドであること
querySelector() はCSSセレクタで「最初の1つ」を柔軟に指定できること
querySelectorAll() はCSSセレクタで「複数の要素」をまとめて取得し、 forEach() などで一括操作できること
テキストの変更には textContent を使うことで、安全にDOMを操作できること

を確認しました。

この3つのメソッドは、今後のDOM操作のほぼすべての場面で登場する「基本の道具」です。

Day 32：要素の取得（後半）

「“現実的なミニ画面”を題材にして、要素取得と操作をまとめて練習する」

Day 32後半では、前半で学んだ

getElementById()
querySelector()
querySelectorAll()

を、少し現実的なミニUI（画面） に当てはめて練習していきます。単に「テキストを変える」だけでなく、

入力フォームから値を取る
リストの見た目を変える
ボタン操作で表示内容を切り替える

といった、Webページらしい動きを通して、「要素を取得して操作する」流れを体に馴染ませていきます。

要素取得＋操作の基本パターンをもう一度整理する

ステップ1：HTML側に“目印”を付ける

JavaScriptから要素を取得するためには、 HTML側に「どの要素か分かる目印」を付けておく必要があります。

id 属性
class 属性
タグ名や構造（div > p など）

例：

<h1 id="pageTitle">タイトル</h1>
<p class="message">メッセージ1</p>
<p class="message">メッセージ2</p>
<button id="changeButton">変更</button>

ステップ2：JavaScriptで要素を取得する

const titleElement = document.getElementById('pageTitle'); // idで取得
const firstMessageElement = document.querySelector('.message'); // 最初の.message
const allMessageElements = document.querySelectorAll('.message'); // すべての.message
const changeButtonElement = document.getElementById('changeButton'); // ボタン

const titleElement = document.getElementById('pageTitle'); // idで取得
const firstMessageElement = document.querySelector('.message'); // 最初の.message
const allMessageElements = document.querySelectorAll('.message'); // すべての.message
const changeButtonElement = document.getElementById('changeButton'); // ボタン

JavaScript

ステップ3：イベントを使って“タイミング”を決める

changeButtonElement.addEventListener('click', function () {
  // ここに「クリックされたときのDOM操作」を書きます
});

changeButtonElement.addEventListener('click', function () {
  // ここに「クリックされたときのDOM操作」を書きます
});

JavaScript

ステップ4：取得した要素のプロパティを変更する

titleElement.textContent = '新しいタイトル';
firstMessageElement.textContent = '最初のメッセージを書き換えました';

allMessageElements.forEach(function (element, index) {
  element.textContent = `メッセージ${index + 1}を一括変更しました`;
});

titleElement.textContent = '新しいタイトル';
firstMessageElement.textContent = '最初のメッセージを書き換えました';

allMessageElements.forEach(function (element, index) {
  element.textContent = `メッセージ${index + 1}を一括変更しました`;
});

JavaScript

この流れが、

「HTML要素を取得して操作する」

ときの基本パターンです。

実践①：入力フォームから値を取得して表示する

画面イメージ

テキスト入力欄
「表示」ボタン
入力された内容を表示する <p>

という、よくあるミニUIを作ります。

HTML＋JavaScriptの例

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>入力フォームから値を取得して表示する</title>
</head>
<body>
  <h1>入力内容を表示するミニアプリ</h1>

  <!-- 入力フォーム -->
  <input id="nameInput" type="text" placeholder="名前を入力してください">
  <button id="showButton">表示</button>

  <!-- 結果表示 -->
  <p id="resultMessage">ここに結果が表示されます。</p>

  <script>
    // 要素を取得します
    const nameInputElement = document.getElementById('nameInput');      // 入力欄
    const showButtonElement = document.getElementById('showButton');    // ボタン
    const resultMessageElement = document.getElementById('resultMessage'); // 結果表示

    // ボタンがクリックされたときの処理を登録します
    showButtonElement.addEventListener('click', function () {
      // 入力欄の値を取得します
      const name = nameInputElement.value; // input要素のvalueプロパティに入力値が入っています

      // 入力が空かどうかをチェックします
      if (name.trim() === '') {
        resultMessageElement.textContent = '名前が入力されていません。入力してください。';
        return;
      }

      // 結果メッセージを表示します
      resultMessageElement.textContent = `こんにちは、${name}さん！`;
    });
  </script>
</body>
</html>

重要ポイントの解説

getElementById() で、入力欄・ボタン・結果表示の3つを取得しています。
入力欄の値は value プロパティから取得します。
textContent を使って結果表示を安全に書き換えています。

ここでのポイントは、

「HTML側にidを付けておき、JavaScript側でそれを取得して、ユーザーの操作に応じてDOMを更新する」

という一連の流れを体験することです。

実践②：リストの見た目を一括で変更する

画面イメージ

商品リスト（<li> が複数）
「強調表示」ボタン
すべての商品に「★」を付ける

というミニUIを作ります。

HTML＋JavaScriptの例

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>リストの見た目を一括変更する</title>
</head>
<body>
  <h1>商品リスト</h1>

  <ul>
    <li class="productItem">ノート</li>
    <li class="productItem">ボールペン</li>
    <li class="productItem">消しゴム</li>
  </ul>

  <button id="highlightButton">すべての商品を強調表示</button>

  <script>
    // すべての.productItem要素を取得します
    const productItemElements = document.querySelectorAll('.productItem');

    // ボタン要素を取得します
    const highlightButtonElement = document.getElementById('highlightButton');

    // ボタンがクリックされたときの処理
    highlightButtonElement.addEventListener('click', function () {
      // すべての.productItemに対して処理を行います
      productItemElements.forEach(function (element) {
        // テキストの前に「★」を付けます
        element.textContent = '★ ' + element.textContent;

        // スタイルを変更して強調表示します（例として色を変える）
        element.style.color = 'red';
        element.style.fontWeight = 'bold';
      });

      console.log('すべての商品を強調表示しました。');
    });
  </script>
</body>
</html>

重要ポイントの解説

querySelectorAll('.productItem') で、複数の要素をまとめて取得しています。
forEach() を使って、すべての要素に同じ処理を適用しています。
textContent と style を組み合わせて、見た目を変えています。

ここでのポイントは、

「同じクラスを持つ複数の要素を、まとめて操作する」

という querySelectorAll() の強みを体感することです。

実践③：querySelectorで“特定の場所の要素”だけを操作する

画面イメージ

お知らせエリア
メインコンテンツエリア
「お知らせだけ書き換える」ボタン

という構成を作り、 querySelector() で「特定の場所の要素」を指定して操作します。

HTML＋JavaScriptの例

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>特定の場所の要素だけを操作する</title>
</head>
<body>
  <div id="noticeArea">
    <h2>お知らせ</h2>
    <p class="message">本日は通常営業です。</p>
  </div>

  <div id="mainContent">
    <h2>メインコンテンツ</h2>
    <p class="message">ここはメインコンテンツの説明です。</p>
  </div>

  <button id="changeNoticeButton">お知らせだけ書き換える</button>

  <script>
    // お知らせエリアのdiv要素を取得します
    const noticeAreaElement = document.getElementById('noticeArea');

    // メインコンテンツエリアのdiv要素を取得します
    const mainContentElement = document.getElementById('mainContent');

    // ボタン要素を取得します
    const changeNoticeButtonElement = document.getElementById('changeNoticeButton');

    // ボタンがクリックされたときの処理
    changeNoticeButtonElement.addEventListener('click', function () {
      // お知らせエリアの中にある.message要素だけを取得します
      const noticeMessageElement = noticeAreaElement.querySelector('.message');

      // メインコンテンツ側の.messageは取得しません（今回は操作対象外）

      // お知らせのメッセージを書き換えます
      noticeMessageElement.textContent = '本日は臨時休業です。ご注意ください。';

      console.log('お知らせエリアだけを書き換えました。');
    });
  </script>
</body>
</html>

重要ポイントの解説

document.querySelector() だけでなく、 任意の要素（ここでは noticeAreaElement）に対して querySelector() を呼び出せる ことが重要です。
これにより、「ページ全体」ではなく「特定のエリアの中だけ」を対象にした検索ができます。

ここでのポイントは、

「どこから検索するか」を意識することで、より細かくDOMを操作できるようになる

ということです。

セキュリティ・安全性の観点からの補足

textContent を基本にする理由

初心者の段階では、テキストの変更には textContent を使うことを基本にすると安全です。

element.textContent = userInput; // ユーザー入力をそのままテキストとして扱う

element.textContent = userInput; // ユーザー入力をそのままテキストとして扱う

JavaScript

textContent は、文字列を「そのままテキスト」として扱い、 HTMLとして解釈しません。
これにより、ユーザー入力に <script> などが含まれていても、それが実行されることはありません。

一方で innerHTML を使うと、

element.innerHTML = userInput; // ユーザー入力をHTMLとして解釈してしまう

element.innerHTML = userInput; // ユーザー入力をHTMLとして解釈してしまう

JavaScript

ユーザー入力がそのままHTMLとして扱われ、悪意のあるスクリプトが実行される可能性があります。

そのため、 「まずはtextContentを使う」 という習慣を身につけておくことは、セキュリティの観点からも非常に重要です。

Day 32 後半練習用総合テンプレート

最後に、Day 32後半の内容を1つにまとめた練習用テンプレートを紹介します。この中に自分でコードを追加・変更しながら、要素取得と操作の感覚を育てていくことができます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 32 後半：要素の取得と操作 総合練習テンプレート</title>
</head>
<body>
  <h1 id="pageTitle">要素取得と操作の総合練習</h1>

  <!-- 入力フォーム -->
  <div>
    <input id="nameInput" type="text" placeholder="名前を入力してください">
    <button id="showButton">名前を表示</button>
    <p id="resultMessage">ここに結果が表示されます。</p>
  </div>

  <!-- 商品リスト -->
  <div>
    <h2>商品リスト</h2>
    <ul>
      <li class="productItem">ノート</li>
      <li class="productItem">ボールペン</li>
      <li class="productItem">消しゴム</li>
    </ul>
    <button id="highlightButton">商品を強調表示</button>
  </div>

  <!-- お知らせとメインコンテンツ -->
  <div id="noticeArea">
    <h2>お知らせ</h2>
    <p class="message">本日は通常営業です。</p>
  </div>

  <div id="mainContent">
    <h2>メインコンテンツ</h2>
    <p class="message">ここはメインコンテンツの説明です。</p>
  </div>

  <button id="changeNoticeButton">お知らせだけ書き換える</button>

  <script>
    console.log('--- 要素取得と操作 総合練習開始 ---');

    // タイトル要素
    const pageTitleElement = document.getElementById('pageTitle');

    // 入力フォーム関連
    const nameInputElement = document.getElementById('nameInput');
    const showButtonElement = document.getElementById('showButton');
    const resultMessageElement = document.getElementById('resultMessage');

    // 商品リスト関連
    const productItemElements = document.querySelectorAll('.productItem');
    const highlightButtonElement = document.getElementById('highlightButton');

    // お知らせ・メインコンテンツ関連
    const noticeAreaElement = document.getElementById('noticeArea');
    const mainContentElement = document.getElementById('mainContent');
    const changeNoticeButtonElement = document.getElementById('changeNoticeButton');

    // タイトルをコンソールに表示
    console.log('現在のタイトル:', pageTitleElement.textContent);

    // 名前表示ボタンのイベント
    showButtonElement.addEventListener('click', function () {
      const name = nameInputElement.value;

      if (name.trim() === '') {
        resultMessageElement.textContent = '名前が入力されていません。入力してください。';
        return;
      }

      resultMessageElement.textContent = `こんにちは、${name}さん！`;
      console.log('名前を表示しました:', name);
    });

    // 商品強調ボタンのイベント
    highlightButtonElement.addEventListener('click', function () {
      productItemElements.forEach(function (element) {
        element.textContent = '★ ' + element.textContent;
        element.style.color = 'blue';
        element.style.fontWeight = 'bold';
      });
      console.log('商品を強調表示しました。');
    });

    // お知らせだけ書き換えるボタンのイベント
    changeNoticeButtonElement.addEventListener('click', function () {
      const noticeMessageElement = noticeAreaElement.querySelector('.message');
      noticeMessageElement.textContent = '本日は臨時休業です。ご注意ください。';
      console.log('お知らせエリアだけを書き換えました。');
    });

    console.log('--- 要素取得と操作 総合練習テンプレートの準備が完了しました ---');
  </script>
</body>
</html>

Day 32 後半のまとめ

Day 32後半では、

getElementById()・querySelector()・querySelectorAll() を、実際のミニUIに当てはめて使う練習を行ったこと
入力フォーム・リスト・特定エリアなど、 Webページらしい構造を題材にして、「要素取得 → イベント → DOM操作」の流れを確認したこと
セキュリティの観点から、テキストの変更には textContent を基本にする重要性を押さえたこと

を整理しました。

この「要素を正しく取得して、安全に操作する」感覚は、今後のDOM操作・UI開発のすべての土台になります。

@lifehacker

挫折しないで楽しく学べるプログラミング。プログラミングを学ぶなら基礎から学べるMONO365 -LifeHack-。「覚える」ではなく「使える」ようになるプログラミング学習。

これから IT 関連の知識を学ばれる方を対象に、色々な言語でのプログラミング方法や関連する技術、Web制作、例題や多くのサンプルコードで実践的な使い方などを、日本一詳しくわかりやすく解説するサイト。
更には、中級者や上級者が実務で使うプログラミングコードや考え方、設計手法、チーム開発、コードレビューなどの実践的な内容も学ぶことができます。

月	火	水	木	金	土	日
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
31

Day 32：要素の取得（前半）

要素取得の基本：まず「document」からスタートする

なぜ「document」なのか

getElementById()：一番シンプルでよく使う入口

役割と特徴

HTMLとセットで見る例

重要ポイント

querySelector()：CSSセレクタで「1つだけ」要素を取得

役割と特徴

HTMLとセットで見る例

重要ポイント

querySelectorAll()：CSSセレクタで「複数の要素」をまとめて取得

役割と特徴

HTMLとセットで見る例

重要ポイント

3つのメソッドの使い分けイメージ

ざっくりした使い分け

セキュリティ・安全性の観点での注意

実践：HTML要素を取得して操作するミニアプリ

Day 32 前半のまとめ

Day 32：要素の取得（後半）

要素取得＋操作の基本パターンをもう一度整理する

ステップ1：HTML側に“目印”を付ける

ステップ2：JavaScriptで要素を取得する

ステップ3：イベントを使って“タイミング”を決める

ステップ4：取得した要素のプロパティを変更する

実践①：入力フォームから値を取得して表示する

画面イメージ

HTML＋JavaScriptの例

重要ポイントの解説

実践②：リストの見た目を一括で変更する

画面イメージ

HTML＋JavaScriptの例

重要ポイントの解説

実践③：querySelectorで“特定の場所の要素”だけを操作する

画面イメージ

HTML＋JavaScriptの例

重要ポイントの解説

セキュリティ・安全性の観点からの補足

textContent を基本にする理由

Day 32 後半 練習用総合テンプレート

Day 32 後半のまとめ

広告ブロッカーが検出されました

Day 32 後半練習用総合テンプレート