DOM操作

概要

詳細解説

実践手順

1. 1
   HTML要素を取得する 2分

   JSからHTMLの要素を操作するため、まずは要素をプログラムの世界に引っ張ってきます。

   • 操作したい要素に id="target" を付ける
   • document.getElementById で取得して変数に入れる

   
                             <!-- HTML側 -->
   <p id="target">古いテキスト</p>
   
   <script>
   const el = document.getElementById('target');
   console.log(el);
   </script>
                           

2. 2
   文字や見た目を書き換える 3分

   取得した要素の中身やスタイルを直接書き換えます。

   • textContent プロパティで文字を変更
   • style プロパティで文字色を変更

   
                             <script>
   const el = document.getElementById('target');
   el.textContent = '新しいテキストに変わりました！';
   el.style.color = 'red';
   </script>
                           

3. 3
   クリックイベントを作る 5分

   ボタンが押された瞬間に処理を走らせる、最も使う仕組みを作ります。

   • button要素を用意しidを付与
   • addEventListener で 'click' イベントを監視する
   • クリックされたらアラートを出す

   
                             <button id="btn">クリック</button>
   
   <script>
   const btn = document.getElementById('btn');
   btn.addEventListener('click', () => {
     alert('ボタンが押されました！');
   });
   </script>
                           

よくある質問

innerHTML使うなって怒られた…textContentと何が違うの？

textContentは入力された文字をただの安全な文字として出すんだけど、innerHTMLは「HTMLタグ」として実行しちゃう。つまり、悪意あるユーザーが入力欄にウイルスみたいなスクリプト書いたらそのまま発動しちゃう（XSS攻撃）ってわけ。超キケン。

JSで新しく追加したボタンをクリックしても反応しない！

addEventListener 書いた時点では、まだそのボタンが存在してなかったからスルーされちゃった説が濃厚。こういう時は「親要素」にイベントくっつけておいて、中身（e.target）が新ボタンだったら発動させる「イベントデリゲーション」って技を使います。

querySelectorAllで取った一覧にmap()使ったらエラー出た

それ、見た目は配列（[div, div, div]みたいな）なんだけど、実は NodeList っていう配列の偽物なんです！forEachは使えるけどmapは使えません。Array.from(nodeList) って書いて本物の配列にジョブチェンジさせると使えますよ！