<h2 id="hcf83e1357e"></h2><h2 id="hdf77755a7f">JavaScriptのDOM操作できること</h2><p>JavaScriptを使うことで、HTMLの構造や中身を動的に変更することができる。<br>クリックで要素を追加したり、フォームの入力に応じて内容を書き換えたりすることが可能。</p><h2 id="h8f4c06a502">🔍 要素の取得</h2><p>要素の取得方法は<code>querySelector</code>と<code>getElementById</code>と<code>getElementsByClassName</code>の３種類がある。</p><p>それぞれ取得する際の（）の中に入れるID名やClass名の記述方法に違いがあるので要注意。間違えて入力すると要素を取得できない⚠️</p><h3 id="h14c6278578">✅ 【ID指定で1つの要素を取得】</h3><pre><code class="language-javascript">// getElementById：ID名をそのまま指定（#は不要）
const element1 = document.getElementById(&quot;my-id&quot;);

// querySelector：CSSセレクタ形式で指定（#が必要）
const element2 = document.querySelector(&quot;#my-id&quot;);</code></pre><p>✅ 【クラス名で複数の要素を取得】</p><pre><code class="language-javascript">// getElementsByClassName：配列っぽいHTMLCollectionが返る
const elements1 = document.getElementsByClassName(&quot;item&quot;);

// querySelectorAll：NodeListが返る。forEachが使える
const elements2 = document.querySelectorAll(&quot;.item&quot;);</code></pre><p>✅ 【タグ名で取得】</p><pre><code class="language-javascript">// getElementsByTagName：タグ名で全て取得
const divs1 = document.getElementsByTagName(&quot;div&quot;);

// querySelectorAll：CSSのようにタグ＋条件もOK
const divs2 = document.querySelectorAll(&quot;div.container&quot;);</code></pre><hr><h2 id="h486cb6e18d">➕ 要素の追加</h2><pre><code class="language-javascript">const newElement = document.createElement(&quot;タグ名&quot;);
newElement.textContent = &quot;テキスト内容&quot;;
親要素.appendChild(newElement);</code></pre><p>📝例文：</p><pre><code class="language-javascript">const list = document.querySelector(&quot;ul&quot;);
const li = document.createElement(&quot;li&quot;);
li.textContent = &quot;新しい項目&quot;;
list.appendChild(li);</code></pre><hr><h2 id="h5854d91049">❌ 要素の削除</h2><p>📝例文：</p><pre><code class="language-html">//HTML
&lt;ul id=&quot;todo-list&quot;&gt;
  &lt;li class=&quot;item&quot;&gt;やること① &lt;button class=&quot;delete-btn&quot;&gt;削除&lt;/button&gt;&lt;/li&gt;
  &lt;li class=&quot;item&quot;&gt;やること② &lt;button class=&quot;delete-btn&quot;&gt;削除&lt;/button&gt;&lt;/li&gt;
&lt;/ul&gt;</code></pre><pre><code class="language-javascript">// すべての削除ボタンを取得
const deleteButtons = document.querySelectorAll(&quot;.delete-btn&quot;);

// 各ボタンにクリックイベントを設定
deleteButtons.forEach((btn) =&gt; {
  btn.addEventListener(&quot;click&quot;, () =&gt; {
    // 親の &lt;li&gt; を削除
    btn.parentElement.remove();
  });
});</code></pre><hr><h2 id="hdbed4bb861">🔁 要素の変更</h2><ul><li>内容の書き換え：</li></ul><pre><code class="language-javascript">element.textContent = &quot;新しいテキスト&quot;;</code></pre><ul><li>属性の変更：</li></ul><pre><code class="language-javascript">element.setAttribute(&quot;class&quot;, &quot;new-class&quot;);</code></pre><ul><li>スタイルの変更：</li></ul><pre><code class="language-javascript">element.style.color = &quot;red&quot;;</code></pre><p></p>

JavaScriptでよく使うDOM操作。要素の取得方法が混乱するのでそれぞれの解説とまとめ。

DOM操作

JavaScript基礎｜よく使うDOM操作(HTML要素の取得・追加・削除・変更)