技術

document.querySelectorで色々なDOMを取得する

投稿日:

こんにちは

javascriptでDOMを取得することは結構あるかと思います。
今回はquerySelectorを使って色々なDOMを取得してみます。

下記は例のHTMLです。

<div id="test"></div>
<div class="top-1">
  <div class="top-2 test"></div>
</div>
<div class="top-1 aa">
  <div class="top-2 common"><p>TITLE</p></div>
</div>

早速試していきましょう。

// idを取得
const el_1 = document.querySelector('#test');

// classを取得
const el_2 = document.querySelector('.common');

// classにtop-2とcommonが指定されているDOMを取得
const el_3 = document.querySelector('.top-2.common');

// top-2クラスにtestクラスが指定されていないDOMを取得
const el_4 = document.querySelector('.top-2:not(.test)');

// クラスの追加・削除・styleの変更
const el = document.querySelector('.test');
// クラスの追加
el.classList.add('aaa');
// クラスの削除
el.classList.remove('aaa');
// styleの変更
el.style.width = '500px';

便利ですね。

一つ注意点としては同じクラスや要素が設定されている場合、最初にマッチしたDOMを取得してしまいます。

複数のDOMを取得したい場合はquerySelectorAllを使います。
querySelectorAllで取得したDOMはNodeListというオブジェクトで返ってきます。
取得したDOMに対してstyle変更やclassの追加などをしたい時は、forEachをつかって一つ一つのDOMに対して設定していきます。

// classにtop-1が指定されているDOMをすべて取得する
const el_3 = document.querySelectorAll('.top-1');
// クラスの追加
el_3.forEach(e => {
  e.classList.add('hoge');
});

個人的にDOM操作といったらJqueryみたいなところがあったのですが改めて使ってみると大分使いやすくて良いです。

参考URL
MDN Document.querySelector()
MDN NodeList

-技術

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

【Rails】ActionController::InvalidAuthenticityToken (ELB,EC2)

どうも中田です。 また出ました。赤い画面。 日々いろんなサイトを見てますが、この …

[ionic] Error code 70 / requires a provisioning profile with the Push Notifications feature.

どうも中田です ionic使っててbuildで引っかかりましたー ionicでp …

no image

[Rails]link_toをhelperから使う

こんばんは Railsでviewを作成している時に、helperからlink_t …

no image

【AWS】mysqldump&S3バックアップ。それは一瞬の出来事

こんにちは、中田です。 RDSでしっかりとバックアップ! とまでしなくていい場合 …

[Xcode] SDK Version Issue – This app was built with the iOS 12.0 SDK. Starting March 2019, all iOS apps submitted to the App Store must be built with the iOS 12.1 SDK or later, included in Xcode 10.1 or later.

こんにちは。たなかです。 2019年、ブログ初更新になります。今年もよろしくお願 …