技術

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

関連記事

Webページまるごと画面キャプチャできるChromeの拡張機能「Full Page Screen Capture」

こんにちは。たなかです。 先日、チームのメンバーにスマホデザインのスクリーンショ …

no image

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

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

no image

【gem/bundle】あんたたち一体どういう関係なのよ!!

どうも中田です。 今回はgemとbundleの話。 前置き よくあるgemの説明 …

LINE BOTを無料で試してみました。heroku + Rails

こんばんは たまにはエンジニアっぽいところを見せようと思い、遅ればせながら、流行 …

no image

[Rails]if文とcontent_for

こんばんは content_for便利ですよね。 今回はcontent_forと …