この記事では、JavaScriptやTypeScriptでWebページの要素を動的に操作する方法について、実務でもよく使われるテクニックをまとめて解説します。 要素の追加・削除、class操作、属性やスタイルの操作など、基本から一歩進んだ「DOMの応用操作」をマスターしましょう！
解説：
前章で紹介した document.querySelector() などで要素を取得できるようになったら、次は新しく要素を追加したり、削除したりする処理にも挑戦してみましょう。
ここでは、JavaScriptでHTMLの構造そのものを変える「動的なDOM操作」の基本を紹介します。
次のようにして、新しいHTML要素を作り、ページに追加することができます：
const ul = document.querySelector('#myList'); // 追加先のul要素を取得
const newItem = document.createElement('li'); // 新しいli要素を作成
newItem.textContent = '追加された項目'; // 中身を設定
ul.appendChild(newItem); // ulの末尾に追加
これにより、指定した「ul要素」の中に「li要素」が1つ追加されます。
実行前と実行後で、HTML構造は次のように変化します：
（実行前）
<ul id="myList">
</ul>（実行後）
<ul id="myList">
<li>追加された項目</li>
</ul>createElement() で作成した要素を appendChild() で追加することで、HTMLの構造がこのように変化します。
追加した要素を削除したいときは、remove() メソッドが使えます：
const item = document.querySelector('#targetItem'); // 削除したい要素を取得
item.remove(); // 要素を削除
このように、削除したい要素を取得し、remove() を実行するだけで、簡単にDOMから取り除くことができます。
実行の前後で、HTMLの構造がどう変わるかも見ておきましょう。
（実行前）
<ul>
<li id="targetItem">削除される要素</li>
<li>残る要素</li>
</ul>（実行後）
<ul>
<li>残る要素</li>
</ul>※ 古いIEでは remove() がサポートされていませんが、現代の主要ブラウザ（Chrome, Edge, Firefox など）では問題なく使えます。
ボタンを押すとリストに要素を追加し、別のボタンで削除する例です：
<ul id="myList"></ul>
<button id="addBtn">追加</button>
<button id="removeBtn">削除</button>
const ul = document.querySelector('#myList');
const addBtn = document.querySelector('#addBtn');
const removeBtn = document.querySelector('#removeBtn');
addBtn.addEventListener('click', () => {
const li = document.createElement('li');
li.textContent = '項目';
ul.appendChild(li);
});
removeBtn.addEventListener('click', () => {
const lastItem = ul.lastElementChild;
if (lastItem) {
lastItem.remove();
}
});実行例を以下に示します。(追加を押すと「項目」が追加され、削除を押すと最後の項目が削除されます。)
－－－－－－－－－－－－－－－このように、createElement() で要素を作り、appendChild() で追加、remove() で削除という一連の流れをマスターすれば、リストやUIパーツをユーザーの操作に応じて動的に変化させる処理が実装できるようになります。
解説：
HTML要素には「class属性」を付けて、CSSで見た目を整えるのが一般的です。
JavaScriptからこのclass属性を動的に変更できると、ユーザーの操作に応じて「色を変える」「表示・非表示を切り替える」などが可能になります。
JavaScriptでは、要素のclassを操作するために classList というプロパティが用意されています。
主に以下の3つのメソッドを使います：
次のコードでは、ボタンをクリックするたびに、背景色が切り替わります。
<div id="box">クリックして色を変える</div>
<button id="toggleBtn">切り替え</button>
const box = document.querySelector('#box');
const btn = document.querySelector('#toggleBtn');
btn.addEventListener('click', () => {
box.classList.toggle('highlight');
});たとえば、CSSで次のようなclassを用意しておけば：
.highlight {
background-color: yellow;
border: 2px solid orange;
}ボタンを押すたびに「highlight」クラスが追加・削除され、背景色が変わります。
ON/OFFを明確に指定したい場合は、add() や remove() を使いましょう。
box.classList.add('active'); // classを追加
box.classList.remove('active'); // classを削除状態に応じて見た目を変えるUIでは、このようにclassを動的に切り替えることがよくあります。
以下のような動作が実装できます：
class操作を覚えると、CSSとの連携がとても強力になります。
JSでスタイルを直接操作するよりも、CSSクラスを切り替えるほうが再利用性・保守性に優れるため、まずはclassListの使い方に慣れておきましょう。
関連記事「DOM操作とイベントリスナーの基本」のaddEventListenerの基本で、実例も紹介していますので、そちらも合わせてご覧ください。
≫記事はこちらから≪
解説：
HTMLの各要素には、「id」や「href」「src」「alt」など、さまざまな属性が設定されています。
JavaScriptでは、これらの属性を 動的に読み取ったり書き換えたり できます。
まずは、属性の値を読み取る方法です：
<a id="link" href="https://example.com">リンク</a>
const anchor = document.querySelector('#link');
console.log(anchor.getAttribute('href')); // 結果 : https://example.comこのように、getAttribute() を使うことで、HTMLタグに設定されている属性の値を取得できます。
次は、属性の値を変更する方法です：
anchor.setAttribute('href', 'https://chat.openai.com');
console.log(anchor.getAttribute('href')); // 結果 : https://chat.openai.comこのように、setAttribute() を使えば、リンクの飛び先などを動的に切り替えることができます。
（変更前のHTML）
<a id="link" href="https://example.com">リンク</a>（変更後のHTML）
<a id="link" href="https://chat.openai.com">リンク</a>このように、JavaScriptを使って要素の属性値そのものを動的に変更できます。
getAttribute() / setAttribute() を使いこなせば、ユーザーの操作に応じて属性を動的に書き換えるようなインタラクティブなUIが実装できます。
解説：
HTMLの中身（テキストや子要素）を取得・変更するには、innerHTML や textContent を使います。
どちらも似ていますが、使い方と用途がまったく異なるので注意が必要です。
HTML構造ごと文字列として取得・上書きできます。
// 初期HTML
<div id="sample"><p>こんにちは</p></div>
const box = document.querySelector('#sample');
console.log(box.innerHTML); // 結果 : <p>こんにちは</p>
box.innerHTML = '<strong>ようこそ</strong>';変更後のHTML①
<div id="sample"><strong>ようこそ</strong></div>HTMLタグごと扱いたい場合や、動的に複数の要素を一括挿入したい場合に便利です。
タグを含まず、テキストのみを取得・上書きします。
box.textContent = '<strong>ようこそ</strong>';変更後のHTML②
<div id="sample"><strong>ようこそ</strong></div>このように、タグ文字列もそのまま表示され、HTMLとして解釈されません。
innerHTMLはとても便利ですが、ユーザーの入力内容をそのまま挿入するのは危険です。
悪意のあるスクリプトが実行される恐れがあり、XSS（クロスサイトスクリプティング）というセキュリティリスクを引き起こします。
// NGな例（ユーザー入力をそのまま挿入）
innerHTML = '<script>alert("危険!")</script>';
セキュリティ面を考えると、基本は textContent を使うのが安全です。
innerHTML は信頼できる定義済みHTMLを挿入する場合に限って使いましょう。
まとめると、innerHTMLは「構造ごと」、textContentは「文字だけ」を扱うと覚えましょう。
解説：
HTML要素の見た目（色・大きさ・配置など）を動的に変更したいときは、styleプロパティ を使います。
JavaScriptから直接CSSを操作することで、画面に動きを加えたり、ユーザー操作に応じた見た目の変化を実現できます。
JavaScriptで取得した要素に対して、CSSのプロパティを直接指定することができます：
const box = document.querySelector('#myBox');
box.style.color = 'red'; // 文字色を赤に
box.style.backgroundColor = 'skyblue'; // 背景色を水色に
box.style.fontSize = '20px'; // フォントサイズを20pxに
このように、CSSのプロパティは キャメルケース（例：background-color → backgroundColor） で記述するのがポイントです。
適用前と適用後の違いを、HTMLとCSSの変化で確認してみましょう。
【変更前】
<div id="myBox">こんにちは</div>【変更後（style適用）】
<div id="myBox" style="color: red; background-color: skyblue; font-size: 20px;">こんにちは</div>
このように、styleプロパティを使えば、JavaScriptから直接CSSを動的に操作できます。
ユーザーのアクションに応じた反応を作る際にも役立ちます。
単発で一時的に見た目を変えたい場合は style プロパティでOKですが、
複数のスタイルをまとめて切り替えたいときは classList の追加・削除のほうが便利です。
// styleプロパティで個別に変更するよりも…
element.style.border = '1px solid gray';
element.style.padding = '10px';
// classをまとめて切り替えたほうが管理しやすい
element.classList.add('active-style');
大規模なプロジェクトやチーム開発では、個別のプロパティ設定よりも、classを使った切り替えの方がスタイルの再利用や保守性が高まります。