javascript querySelectorを使用して要素を取得する

javascript querySelectorを使用して要素を取得する

javascriptで、セレクタ APIと呼ばれるAPIのメソッドであるquerySelectorを使用して、要素を取得するサンプルコードを掲載してます。ブラウザはchromeを使用しています。

環境

  • OS windows10 pro 64bit
  • Apache 2.4.43
  • ブラウザ chrome 84.0.4147.105

querySelector使い方

querySelectorを使用することで、class名や要素名を指定して、要素を取得することが可能です。

実際に、querySelectorを使用して要素を取得してみます。

取得するhtml

javascript部

実行結果

「const obj3 = document.querySelector(‘div’);」の実行結果の通り、querySelectorは初めに見つかった要素を取得します。

inputや複数IDを指定して、取得することも可能です。

存在しないものを指定するとnullが返ります。

また、querySelectorAllを使用すると指定した全ての要素を取得することが可能です。

なお、基本的には、同じ要素を取得するメソッドである「getElementById」の方が処理は速いです。

サンプルコード

以下は、
「実行」ボタンをクリックして、指定した要素を取得した後に、表示する
サンプルコードとなります。

※cssには「tailwind」を使用して、アロー関数で関数は定義してます。

要素の内容が、出力されていることが確認できます。

その他 querySelector使用例

value取得

value設定

onclick

クラス追加

クラス削除

クラス存在チェック