QuerySelectorと他のgetElementByの違い

Queryselector Difference With Other Getelementby

要素のDOMオブジェクトを取得する以前はgetElementByIdとgetElementsByTagNameを使用していましたが、現在はこれらのメソッドとquerySelectorの概要を作成する方法はたくさんあります。
タグ名を名前とカテゴリで取得するには、3つの要素、つまりIDによる要素を取得する一般的な方法があります。
DOMはgetElementByIdというメソッドを提供します。このメソッドは、ドキュメントオブジェクトの一意の関数であるid属性に対応するノードオブジェクトを返します。このメソッドは、次のメソッドを使用してのみ呼び出すことができます。document.getElementById('idName')

getElementsByTagNameメソッドはオブジェクトの配列を返します（正確にはHTMLCollectionが設定されます）。シーケンスは、文字列のgetElementsByTagName（）メソッドに渡されるドキュメントの要素が大文字と小文字を区別しない順序でオブジェクトを返します。次のように使用されます。document.getElementsByTagName(tagName)

DOMは、getElementsByClassName要素がクラス名を指定するようにするメソッドも提供します。このメソッドは、NodeListオブジェクトとして、コレクションのクラス名を指定するドキュメント内のすべての要素を返します。 NodeListオブジェクトは、ノードリストの順序を表します。 NodeListオブジェクトは、ノードリストノードリストインデックス番号（0から始まるインデックス番号）内のノードからアクセスできます。次のメソッドを使用して、指定されたインデックスの場合に使用されることがあります。document.getElementsByClassName('className')

querySelector（）メソッドは、最初のサブ要素で指定された要素に一致するCSSセレクターを返します。このメソッドは、指定されたセレクターに一致する最初の要素のみを返します。一致するすべての要素を返すには、代わりにquerySelectorAll（）メソッドが必要です。

querySelectorは達成するcss仕様に基づいているため、文字列の最初の文字を渡すことはできません。

最後に、要約するデータクエリによると：
配列要素のクエリセレクターが選択した要素は静的であり、要素が選択されたgetElementこのメソッドは動的です。選択された静的配列のすべての要素で、操作はドキュメントによって変更されません。
このメソッドを使用すると、getElementのパフォーマンスが向上し、クエリセレクターがより便利になります。

参照リンク：

https://github.com/cncounter/translation/blob/master/tiemao_2014/NodeList/NodeList.md

|_+_|