[JS]DOM要素の取得

DOM要素を取得する方法はいくつかあります.1つの要素を複数の方法で得ることができ,その中でどの方法が最も良く,状況に適した方法が何であり,どの方法にもどのようなメリットとデメリットがあるかを調べた.
getElement*
getElementシリーズは、id、class、tagなどの導入要素を利用することができる.-sが添付された方法は、複数の要素を同時にもたらす.
getElementByIdDocument.prototype.getElementByIdメソッドは、引数伝達idツリー値を有する要素を取得し、返す.elementの後ろには-sが貼られていないので、1つの要素しか返されません.通常、idは繰り返し不可能な固有値ですが、HTMLのidドキュメントツリーは繰り返し可能な値です.
開発者がidを繰り返し使用するのも1つの方法ですが、開発者はよくエラーが発生するため、Document.prototype.getElementByIdは開発者の意図とは異なる可能性があります.重複するid語ツリー値がある場合は、最初の値を取得します.

<ul>
  <li id="banana">banana</li>
  <li id="apple">apple</li>
  <li id="orange">orange</li>
</ul>

<script>
  const $apple = document.getElementById('apple');
</script>

getElementsByClassNamedocument.prototype/element.prototype.getElementsByClassNameメソッドは、引数から渡されたclassツリー値を持つ要素ノードを取得し、返します.-sが付いているので、すべての怒涛要素が一度に戻ります.このとき、要素ノードはHTMLCollectionオブジェクトに組み込まれて返されます.

<ul class="fruits">
  <li class="banana">banana</li>
  <li class="apple">apple</li>
  <li class="orange">orange</li>
</ul>

<script>
  const $fruits = document.getElementByClassName('fruits');
</script>

getElementsByTagNamedocument.prototype/element.prototype.getElementsByTagNameメソッドは、引数によって渡されたタグ名を持つ要素ノードをナビゲートして返します.-sが付いているので、すべての怒涛要素が一度に戻ります.要素ノードがHTML Collectionオブジェクトに読み込まれ、戻ります.getElementsByClassNameおよびgetElementsByTagNameの方法は、ドキュメントだけでなく、要素の後のフィルタリングにも使用できます.

<ul class="fruits">
  <li class="banana">banana</li>
  <li class="apple">apple</li>
  <li class="orange">orange</li>
</ul>

<script>
  const $elems = document.getElementByTagName('li');
  [...$elems].forEach(elem => { elem.style.color = 'blue'; })
</script>

querySelector*querySelectorおよびquerySelectorAllの方法は、CSSセレクタを使用してDOM要素を取得する.CSSセレクタを使用するため、クラスをインポートする際にクラスセレクタ.を漏らさないように注意してください.
querySelectordocument.prototype/element.prototype.querySelector方法は、自己変数伝達を満たすCSS選択者の要素を探索し、返す.

因数伝達を満たすCSSセレクタの要素ノードが複数ある場合、最初の要素ノードのみが返されます.

因数伝達を満たすCSSセレクタの要素ノードが存在しない場合、nullが返される.

getElementsByClassNameまたはgetElementsByTagNameのような要素ノードに使用することができる.

<ul class="fruits">
  <li class="banana">banana</li>
  <li class="apple">apple</li>
  <li class="orange">orange</li>
</ul>

<script>
  const $fruits = document.querySelector('.fruits');
  const $banana = $fruits.querySelector('.banana');
</script>

querySelectorAlldocument.prototype/element.prototype.querySelectorAllメソッドは、引数の伝達を満たすCSSセレクタのすべての要素ノードをナビゲートして返します.要素ノードはDOMコレクションオブジェクトNoteListに戻ります.

<ul class="fruits">
  <li class="banana">banana</li>
  <li class="apple">apple</li>
  <li class="orange">orange</li>
</ul>

<script>
  const $fruits = document.querySelectorAll('li');
</script>

何を使いますか.

IDが存在する場合、getElementById

IDがなく、要素が1つしかない場合、querySelector

IDが存在せず、複数の要素を同時にインポートする必要がある場合、querySelectorAll

getElementsByTagNameまたはgetElementsByClassNameで返されるHTML Collectionオブジェクトは、ノードオブジェクトの状態の変化をリアルタイムで反映するアクティブなオブジェクトとして使用されるので注意が必要です.したがって、ノードリストに戻るquerySelectorAllを使用するのがより適切である.HTML CollectionまたはNodeListを使用する場合、配列に変更すると、開発者がエラーを起こす確率が減少します.どちらのオブジェクトも似たような配列のオブジェクトで、どちらも小さくてかわいいです.両方のオブジェクトを配置に変更できます.