技術

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 を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

[AWS Cli] brew install awscli が失敗!

どうも中田です awsコマンドがないよーって言われたので、再度インストールするこ …

no image

TypeScriptで連想配列の型定義をする

TypeScriptを書いているときに、毎回調べていたので簡単にまとめました。 …

[ionic] アプリ名にハイフンやアンダーバー入ってると困る件

どうも中田です 今日もionicのお話。 スマホアプリ作るときに test-ap …

[Xcode] The executable was signed with invalid entitlements. でアプリを実機確認できない!

こんにちは。たなかです。 作ったiOSアプリを実機確認したくて、Xcodeからデ …

[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年、ブログ初更新になります。今年もよろしくお願 …