querySelectorで要素の有無を調べ、if文で分岐させる

querySelectorで探しているイメージ フロントエンド技術

javascriptにはquerySelectorという要素を取得するためのメソッドがありますが、これがif文と組み合わせて、要素が存在するかどうか調べた上で分岐させることができるんですね。

if(document.querySelector('.error')){
  console.log('.errorのクラスが存在する場合の動作を入れる');
} else {console.log('何も起こらない')}

classでなく、idを対象にするのであれば、getElementByIdとかでもできるし、他にも使えるメソッドは色々あります。

こうした要素の有無を調べた上で分岐するやり方が役に立つのを実感するのは、他の人が作ったワードプレスとかのプラグインを使う時で、自分が作ったものじゃないから簡単に変えられるところと、そうじゃない部分が結構出てくるんですね。そういう時に自分で追加のjavascriptのコードを書いてカスタマイズする際に、手っ取り早く役に立つわけです。

0
タイトルとURLをコピーしました