技術

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

関連記事

no image

ActiveRecord::Relationのklassメソッドでmodelを取得できる。

こんにちは。コーテッグのこやまです。 モデルに対してallやwhereメソッドを …

no image

VivaldiのWEBパネルに登録して便利だったサイトを紹介する

こんばんは VivaldiのWEBパネルはとても便利です。 今回はWEBパネルに …

【Alexa Skill】ビックリするなかれ (Unsupported Directive)

どうも中田です。 みなさんAlexa使ってます?Alexaスキル作ってます? 今 …

no image

[Angular]ng-forでオブジェクトを回してkeyとvalueを取得する。

AngularのディレクティブであるngForで以下のように、オブジェクトを回そ …

github500

[GitHub] 突然プッシュできなくなったときの確認事項

こんにちは。佐藤です 今回はGitHubに突然プッシュできなくなったときの確認事 …