JavaScriptの学び直し。querySelectorとは

こんにちは！

マーケティング部受託プロダクトチームのインターン生、村高歩夢です！

今さらな話ですが、僕はJavaScriptを体系的に学んでおらず、ChatGPTとその場その場で調べwebから拾った知識しかないのです。

なので、古のgetElementsByをいまだに使っていたんです。

気づきいちゃいました。文明すげぇ。

getElementsByの後継のquerySelectorめちゃめちゃ便利やん。

もちろんquerySelector知ってはいたんですが、webで調べて消費するだけでした。。

そして最近、さすがにまずいと思い、JavaScriptを1から学び直している訳です。

この二つgetElementsByとquerySelectorはどちらも要素を取得するメソッドなんですが、

querySelectorはめちゃくちゃ楽！

h1要素を取得したければ

document.querySelector('h1');

id = headerのようなid属性を取得したければ

document.querySelector(‘header’);

と記入します。

変わる部分は(' ')内だけ！！

一方でgetElementsByは取得したい要素の指定方法によってメソッドも若干変わってきます。

h1要素を取得したければ

document.getElementsByTagName(‘h1’);

となります。id = headerを取得したければ

document.getElementsById(‘header’);

と書く必要があります。

つまり、(‘ ‘)に加えてByの後の記述を変えなくてはいけないんです。

地味〜に不便ですよね。

これからはquerySelectorで書いていこうと思います。

そして、この調子でJavaScriptも学び直してマスターしていく所存です。

ゆくゆくはtypescriptとreactもやってみたいですね。

---

■ガーディアン主力ソリューション→OWLet

■新サービスリリースのお知らせ

WEB業界を変える！育てて成果を上げるサブスク型HPサービス

→SCSC (スクスク)

ガーディアンのインターン制度→こちら

村高歩夢の紹介ページ→こちら