技術

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

RxJSを覚える時に参考にしたサイトまとめ

こんばんは 弊社ではAngularを使用する機会が多いです。 Angularを使 …

[Ionic]UnhandledPromiseRejectionWarning: CordovaError: Requirements check failed for JDK 1.8 or greater

こんにちわ。田中です。 参画しているプロジェクトで使っているのもあって、現在Io …

【ionic】バックボタンの文字だけ消す

どうも中田です。 今回はHTML5ハイブリッド開発でお馴染みのionicについて …

no image

HTMLエンティティを探すならHTML Arrowsがオススメ!

こんにちは htmlエンティティっていうのを聞いたことがありますか? アンパサン …

no image

こんにちは。コーテッグの小山です。 以前リアクティブフォームのHTML側の記述と …