0Pricing
Frontend Academy · レッスン

コンテンツの変更: textContent、innerHTML、classList

要素のテキストコンテンツを読み書きし、HTMLを挿入し、CSSクラスをプログラムで切り替え、追加、削除します。

「コンテンツの変更: textContent、innerHTML、classList」はCoddyKit上の無料Frontend Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはFrontend Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Frontend Academyコースには全4レッスンが含まれています。

textContentの読み取りと書き込み

element.textContent は、すべての子孫要素を含む要素のプレーンテキストを取得または設定します。HTML を解析しないため安全です。ユーザー入力を設定しても、XSS 脆弱性は発生しません。

const heading = document.querySelector('h1');
console.log(heading.textContent); // read
heading.textContent = 'New Title'; // write — replaces all children

// Safe with user input:
element.textContent = userInput; // no XSS risk

innerHTML — 注意して使用する

element.innerHTML は、要素内の HTML マークアップを取得または設定します。便利ですが、ユーザー入力に対して使用すると危険です。HTML を解析してスクリプトを実行できるためです（XSS）。サニタイズされていないユーザーデータを innerHTML に設定しないでください。

card.innerHTML = '<strong>Loading...</strong>'; // safe: hardcoded string

// DANGER — never do this:
element.innerHTML = userInput; // XSS vulnerability

// Safe alternative:
const div = document.createElement('div');
div.textContent = userInput;   // won't parse as HTML

innerTextとtextContent

innerText は表示されているテキストだけを返し（CSS の display:none を考慮します）、レイアウトを発生させます。textContent は非表示のテキストも含むすべてのテキストを返し、より高速です。表示テキスト特有の動作が必要な場合を除き、textContent を使用してください。

classList — クラスの追加と削除

element.classList は、className 文字列全体を操作せずに CSS クラスを変更するメソッドを提供します。add()、remove()、toggle()、contains()、replace() があります。

const btn = document.querySelector('.btn');
btn.classList.add('active');         // add a class
btn.classList.remove('disabled');    // remove a class
btn.classList.toggle('open');        // add if absent, remove if present
console.log(btn.classList.contains('active')); // true

forceパラメーター付きtoggle

classList.toggle('class', condition) は、condition が truthy の場合にクラスを追加し、falsy の場合に削除します。クラスをブール値の状態と同期するための簡潔な方法です。

const isDark = true;
document.body.classList.toggle('dark-mode', isDark);
// No more: if/else with add/remove

属性の読み取りと設定

element.getAttribute('attr') は任意の属性を読み取ります。element.setAttribute('attr', value) は属性を設定します。element.removeAttribute('attr') は属性を削除します。element.hasAttribute('attr') は属性の存在を確認します。

const img = document.querySelector('img');
console.log(img.getAttribute('alt'));
img.setAttribute('alt', 'New description');
img.removeAttribute('loading');

data-*属性

カスタム data-* 属性は、DOM に影響を与えずに要素へ追加データを格納します。element.dataset を使い、camelCase でアクセスできます。

<div id="card" data-user-id="42" data-role="admin"></div>

const card = document.querySelector('#card');
console.log(card.dataset.userId); // '42'
console.log(card.dataset.role);   // 'admin'
card.dataset.status = 'active';   // sets data-status

styleプロパティ

element.style.propertyName はインラインスタイルを設定します。ハイフン区切りのプロパティには camelCase を使用してください。インラインスタイルを設定するよりも CSS クラスの切り替えを優先してください。クラスを使うと、スタイルを本来配置すべき CSS ファイルで管理できます。

element.style.backgroundColor = '#e2e8f0'; // camelCase
element.style.marginTop = '16px';
element.style.display = 'none';

// Reset inline style:
element.style.removeProperty('background-color');

計算済みスタイルの読み取り

getComputedStyle(element) は、インラインスタイルだけでなく、カスケード後に実際に適用されたスタイルを返します。CSS クラスやブラウザーのデフォルトによって設定されたスタイルを読み取る場合に使用します。

const el = document.querySelector('.card');
const styles = getComputedStyle(el);
console.log(styles.fontSize);     // '16px'
console.log(styles.display);      // 'flex'

titleとmetaタグの変更

ドキュメントのタイトル（ブラウザーのタブ）は、document.title = 'New Title' を使っていつでも変更できます。SPA では、ビュー間を移動する際のユーザー体験が向上します。

// Update tab title on route change:
document.title = `${pageName} | MyApp`;

scrollIntoView()

element.scrollIntoView({ behavior: 'smooth' }) は、要素が表示領域に入るように滑らかにスクロールします。セクションへのスクロールナビゲーションや、フォームのバリデーションエラーの強調表示に最適です。

document.querySelector('#pricing').scrollIntoView({ behavior: 'smooth', block: 'start' });

確認問題

XSS のリスクなしに DOM にユーザーが提供したテキストを安全に表示するには、どのプロパティを使用すべきですか？

まとめ: DOMの変更

textContent はプレーンテキストを安全に設定します。innerHTML は HTML を設定しますが、ユーザー入力に対しては危険です。classList.add/remove/toggle は CSS クラスを簡潔に処理します。setAttribute/dataset は HTML 属性を管理します。インラインスタイルよりもクラスの切り替えを優先してください。getComputedStyle は最終的に適用されたスタイルを読み取ります。

よくある質問

「コンテンツの変更: textContent、innerHTML、classList」レッスンは無料ですか？

はい。「コンテンツの変更: textContent、innerHTML、classList」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Frontend Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Frontend Academyコースには全4レッスンが含まれています。

「コンテンツの変更: textContent、innerHTML、classList」で何を学びますか？

要素のテキストコンテンツを読み書きし、HTMLを挿入し、CSSクラスをプログラムで切り替え、追加、削除します。 ブラウザで直接実行するハンズオンコードでFrontend Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Frontend Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのFrontend Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。

「コンテンツの変更: textContent、innerHTML、classList」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このFrontend Academyレッスンでコードを書いて実行できますか？

はい。すべてのFrontend Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. querySelectorとquerySelectorAll
  2. addEventListenerとEventオブジェクト
  3. コンテンツの変更: textContent、innerHTML、classList
  4. 要素の作成と追加
← Frontend Academyに戻る