javascriptのDOM操作_2

プログラミング学習

2025/01/27 2024/07/11

次はループで取得を取得します。

HTMLコード

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>
            タイトル
        </title>
    </head>
    <body>
        <ul>
            <li id="item-1">One</li>
            <li id="item-2">Two</li>
            <li id="item-3">Three</li>
          </ul>
        <script src="js/test.js"></script>
    </body>
</html>

javascriptコード

document.addEventListener('DOMContentLoaded', () => {
  
  const listItems = document.querySelectorAll('li');
  for (let i = 0; i < listItems.length; i++) {
    alert(listItems[i].id);
  }
  
});

これで読み込むだけでコードが実行されます。
読み込んだ後、自動で実行されます。
アラートでliタグのidを順番に出力されるはずです。
javascriptコードを以下の様にしても同じ動作します。

document.addEventListener('DOMContentLoaded', () => {
  
  const listItems = document.querySelectorAll('li');
  
  Array.prototype.forEach.call(listItems, item => {
    alert(item.id);
  });
});

これはforEach文で動かしています。
要素の数だけ繰り返すとかそんな意味です。

使い道思いつくのは難しいと思いますが、覚えておいて損はないでしょう。