何に対して最適なのかによるんじゃない。パフォーマンスにとってならやっぱりidかclassがいいだろうし、運用上CSSやアンカーリンクで利用するので避けたいというならdata属性の方がいい。実際、getElementByID()はquerySelector()の倍以上早いという検証をしてる人もいるけど、決してquerySelector()が遅いわけではない。
何をもって一般的とするか、何をもって最適とするかはケースバイケースだから一概には語れない。ただ、自分が持つ常識を語るなら、> classで取得するとclass名はそもそも変更される可能性が高い命名規則でなんとでもなる。よく見るのは、jsで使用するクラス名とcssで使用するクラス名は共有しないやり方。<navi class="globalMenu js-globalMenu">> idに関しては特に理由はない意味が分からない。そのページで唯一の要素とするなら、idを使わない手はないし、最も高速。逆に、cssでIDの指定を禁止したら、jsではid属性が使い放題だ。(これもよく見る手法)ちなみに、cssでのidとclassの指定は、パフォーマンス上、jsほど差がない(らしい)> document.querySelector('[data-○○]');特別に悪手というわけでもないけど、getElementByIdの枠が開いてるのにわざわざこの手法を用いる優位性がない。ただ、パフォーマンスを落としてるだけ。使ってはいけないというわけでもないが、ぜんぜんおすすめしない。
2 件の回答
何に対して最適なのかによるんじゃない。
パフォーマンスにとってならやっぱりidかclassがいいだろうし、運用上CSSやアンカーリンクで利用するので避けたいというならdata属性の方がいい。
実際、getElementByID()はquerySelector()の倍以上早いという検証をしてる人もいるけど、
決してquerySelector()が遅いわけではない。
何をもって一般的とするか、何をもって最適とするかはケースバイケースだから一概には語れない。
ただ、自分が持つ常識を語るなら、
> classで取得するとclass名はそもそも変更される可能性が高い
命名規則でなんとでもなる。
よく見るのは、jsで使用するクラス名とcssで使用するクラス名は共有しないやり方。
<navi class="globalMenu js-globalMenu">
> idに関しては特に理由はない
意味が分からない。
そのページで唯一の要素とするなら、idを使わない手はないし、最も高速。
逆に、cssでIDの指定を禁止したら、jsではid属性が使い放題だ。(これもよく見る手法)
ちなみに、cssでのidとclassの指定は、パフォーマンス上、jsほど差がない(らしい)
> document.querySelector('[data-○○]');
特別に悪手というわけでもないけど、getElementByIdの枠が開いてるのにわざわざこの手法を用いる優位性がない。ただ、パフォーマンスを落としてるだけ。使ってはいけないというわけでもないが、ぜんぜんおすすめしない。