📘 JavaScriptのDOM操作まとめ

JavaScriptのDOM操作まとめ

✅ 1. innerHTML / textContent / innerTextの違い

プロパティ名	タグ認識	改行反映	非表示要素の認識	説明
innerHTML	✅ あり	❌ なし	✅ あり	HTMLタグを含めた全体の内容を取得または設定
textContent	❌ なし	❌ なし	✅ あり	テキストのみを取得（タグ無視）
innerText	❌ なし	✅ あり	❌ なし	実際に表示されるテキストのみを取得

🔍 HTMLの例

<div id="box">
  <p style="display: none;">非表示</p>
  <p>表示されるテキスト</p>
</div>

## 📦 結果比較
```javascript
const box = document.getElementById("box");

box.innerHTML;     // <p style="display: none;">非表示</p><p>表示されるテキスト</p>
box.textContent;   // 非表示表示されるテキスト
box.innerText;     // 表示されるテキスト

## ✅ 使い分けのポイント

| 状況                                | おすすめのプロパティ |
|------------------------------------|------------------------|
| HTMLタグも一緒に扱いたい時         | `innerHTML`           |
| テキストだけをシンプルに扱いたい時 | `textContent`         |
| 実際に表示される文字だけを扱いたい時 | `innerText`         |