【JavaScript】超基礎的なメソッドの紹介 その２

JavaScriptで行うDOM(Document Object Model、要はHTML等のマークアップ言語にアクセス・編集しやすい標準的に仕組み)の操作において、基礎的なメソッドを学んだため、備忘として記します。
前回は、「１ HTML要素の取得」、「２　テキストデータの取得」を紹介しましたが、その続きです。

３　セレクタ式による要素の取得とgetメソッドとの比較
　（１）セレクタ式による要素の取得

<ul id="listsSports">
  <li class="list">サッカー</li>
  <li class="list">野球</li>
  <li class="favorite">テニス</li>
</ul>
<ul id="listsDrinks">
  <li class="favorite">ビール</li>
  <li class="favorite">ワイン</li>
  <li class="list">焼酎</li>
</ul>
<script>
  const lists = document.querySelectorAll(`.list`); //class属性がlistに該当する要素すべて取得し、定数listsに代入。
  console.log(lists); //「サッカー」、「野球」、「焼酎」の要素をコンソールに出力。 
  const list = document.querySelector(`.list`); //class属性がlistに該当する要素のうち、最初に該当したもののみを取得し、定数listに代入。
  console.log(list); //「サッカー」の要素をコンソールに主力。 
</script>

　（２）getメソッドとの比較
　　　　例えば、上記リストのうち以下の要素のみを取得したいとする。

  <li class="favorite">ビール</li>
  <li class="favorite">ワイン</li>

　　　　この場合、getメソッド（getElementByIdとgetElementsByClassName)だと一度定数にいれたものを再度取得する必要が出てくる。

<script>
  const lists = document.getElementById(`listsDrinks`);//まず、id属性がlistsDrinksの要素をすべて取得。
  const favoriteDrinks = lists.getElementsByClassName(`favorite`); //そこからclass属性がfavoriteの要素を取得。
  for ( let i = 0; i < favorite.Drinks.length; i++) {
  console.log(favoriteDrinks[i]); //繰り返し文による出力。
}
</script>

　　　　一方で、セレクタ式（queryメソッド）だと、要素の取得に関して１行で記述を済ませられる。

<script>
  const favoriteDrinks = document.querySelectorAll(`#listsDrinks .favorite`);
  for ( let i = 0; i < favorite.Drinks.length; i++) {
  console.log(favoriteDrinks[i]);
}
</script>

　　　　定義する変数や定数の数が増えるほど、getメソッドは記述が多くなる。
　　　　比べて、セレクタ式（queryメソッド）は複数の条件を１つにまとめられる点で優れている。

　　　　ただし、処理速度の点でいえばgetメソッドはqueryメソッドよりも速いため、コード記述のボリュームや煩雑さに合わせて使い分けが必要。

今回は以上です。