JavaScriptではdocumentオブジェクトのgetElementByIdメソッドで指定したid名の要素を取得したり、getElementsByClassNameメソッドで指定したclass名の要素を取得できますが、ネットショップASPなど後からidやclass名が追加がどうしてもできない場合などにはこれらのメソッドが使えません。

documentオブジェクトのquerySelectorメソッド

そんな時に便利に使えるのが、documentオブジェクトのquerySelectorメソッド。

このメソッドは、次のように( )内の引数に指定した「セレクタ」にマッチする要素を取得することができます。

document.querySelector("section p:first-letter"); 

引数にはCSS3のすべてのセレクタが指定できるので様々な場面で柔軟に使えそうですね。

ただ、querySelectorメソッドは最初マッチした要素一つしか取得できません。もし指定したセレクタにマッチする要素を全て取得したい場合は、querySelectorALLメソッドを使えばOKです。

document.querySelectorAll("section"); 

この2つのメソッドがあれば、要素の取得はほとんどがまかなえそうな気がしますが、残念ながら処理速度が遅いようです。

id名、class名で要素が取得できるときにはこれまで通り「document.getElementById(id名)や「document.getElementsByClassName(class名)」を使いましょう。