[JavaScript] CSS3のすべてのセレクタが引数に指定できるdocument.querySelectorが便利。

2017年01月09日
Sponsored Link

img_javascript

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名)」を使いましょう。

follow us in feedly

関連記事

福岡のウェブデザイン事務所「ハブワークス」

HP作成・リニューアルは福岡のハブワークスまでお気軽にお問い合わせください。ウェブサイト公開後の修正・更新もお任せください。フリーランスだからできるリーズナブルな料金設定でサービスをご提供いたします。

webサイト制作・修正に関するお問合せ・ご相談・お見積りはお気軽にどうぞ