BLOG

jsでのHTML要素をquerySelectorで簡単取得!

| JavaScript

HTML要素の取得はいままでjQueryで取得するのが簡単なので、それですることが多かったのですが、
jQueryのように取得できる「querySelector()」が便利だったのでご紹介!

querySelector()とは

上で、記述通りHTML要素を取得できるメソッドです。
今までもJavaScriptで「getElementById()」とか「getElemetnsByClassName()」はもともとありましたが
ID属性・class属性のセレクタは取得できましたが、そんなこと気にせずに使えるのが「querySelector()」です。

まぁ、わかりやすく言うとquerySelector()でどんなHTML要素でも取得することができるのです。

querySelector()はどうやって使う?

ひとまずは、一番簡単な構文がこんな感じです。

document.querySelector('.selector');
document.querySelector('#selector');

こんな感じで取得ができます。
さすがにjQueryよりは記述としては長いですが、getElemen….なんちゃらよりは楽な気がしますよねw
実際には、変数に打ち込んで使う感じになると思います。

const elm1 = document.querySelector('.selector');
const elm2 = document.querySelector('#selector');

こんな感じになるかと思います。
一つ注意しないといけないことがあります。
jQueryと違って「querySelecoter()」は、取得できるのが最初に取得したもののみということです。
なのでclassなので複数取得したい場合の方法は別にあります!

querySelectorAll()」を使えば、複数のHTML要素を取得できます。
書き方はほぼいっしょです。

const elmA = document.querySelectorAll('.selector');

うん、Allつけるだけですねw
簡単です!
複数の要素もとれるし、最初のだけっていうのも使いやすそうでよい。
最初の要素だけ取得とかっていろいろつかえるのでこれはこれで便利ですよね。

PureJSはjQueryとかを読み込まなくてもよくなって少しは速度アップになるので、
できるだけこういった書き方をできるだけしていきたいですよね。

RECENT POSTS

WordPressでIDから本文を取得する

[PHP] 配列内の空白を削除「array_filter」「array_diff」

[PHP] 配列内の同じ値をまとめる「array_unique」

WordPressのカスタムフィールドでソートする

連想配列から特定の値を取得して配列にいれちゃうってやつ

JavaScriptで取得するGETの値

【CSS】text-decorationのカスタマイズができるの知ってた?

CSSでフッターの下に隙間ができないように調整する

「reduce」を使って配列を値を処理する

data属性の取得・設定・更新【JavaScript】

CATEGORY

POPULAR POSTS

PAGE TOP