Tampermonkeyで要素を取得する方法｜DOM操作入門

はじめに

Tampermonkeyで自動クリックやフォーム入力、画面カスタマイズをしようとして最初にぶつかりやすいのが、「そもそも対象の要素をどう取るか」です。

Tampermonkeyのスクリプトは、ページ上の要素を取得できないと何も始まりません。ここでよく使うのが querySelector や querySelectorAll です。

この記事では、Tampermonkeyで要素を取得する基本と、初心者向けのDOM操作の考え方をまとめます。

querySelector の基本
クラス名、属性、テキストから要素を取る方法
closest を使った親要素の取り方
よくあるDOM操作
要素が取れないときの確認ポイント

Tampermonkeyの全体像を先に確認したい場合は、Tampermonkeyとは？初心者向け使い方と簡単スクリプト解説から読むと流れをつかみやすいです。

なぜ要素取得が大事なのか

Tampermonkeyでやることの多くは、次の流れで成り立っています。

ページ上の要素を取得する
その要素に対して処理する
必要なら見た目や入力値を変える

たとえば以下のような処理は、すべて要素取得が前提です。

ボタンをクリックする
入力欄に値を入れる
不要なパネルを非表示にする
重要な情報を目立たせる

つまり、要素取得を理解すると他のTampermonkey記事もかなり扱いやすくなります。

querySelectorの基本

一番よく使うのは querySelector です。

const button = document.querySelector('button');

const button = document.querySelector('button');

これは、ページ内で最初に見つかった button 要素を1つだけ取得します。

見つからなければ null になるので、初心者のうちは if で確認してから処理するのがおすすめです。

const button = document.querySelector('button');

if (button) {
  button.click();
}

const button = document.querySelector('button');

if (button) {
  button.click();
}

よく使うセレクタの書き方

タグ名で取る

document.querySelector('button');
document.querySelector('textarea');

document.querySelector('button');
document.querySelector('textarea');

一番簡単ですが、ページ内に同じ要素が多いと狙いが曖昧になりやすいです。

クラス名で取る

document.querySelector('.submit-button');

document.querySelector('.submit-button');

先頭に . を付けるとクラス指定になります。

IDで取る

document.querySelector('#main-panel');

document.querySelector('#main-panel');

先頭に # を付けるとID指定になります。

属性で取る

document.querySelector('input[name="email"]');
document.querySelector('button[data-role="save"]');

document.querySelector('input[name="email"]');
document.querySelector('button[data-role="save"]');

フォーム入力や管理画面では、属性指定がかなり使いやすいです。

テキストで絞り込む

querySelector だけでは文言そのもので取れないので、複数候補から絞り込みます。

const buttons = [...document.querySelectorAll('button')];

const target = buttons.find(
  (button) => button.textContent.trim() === '保存'
);

const buttons = [...document.querySelectorAll('button')];

const target = buttons.find(
  (button) => button.textContent.trim() === '保存'
);

includes() で部分一致にすると便利ですが、意図しない候補まで拾いやすいです。初心者のうちは、まず完全一致で試すほうが安全です。

複数要素をまとめて取る方法

複数の候補から選びたいときは querySelectorAll を使います。

const buttons = document.querySelectorAll('button');

const buttons = document.querySelectorAll('button');

これで取得できるのは複数要素の一覧です。必要に応じて配列風に扱えます。

const buttons = [...document.querySelectorAll('button')];

const target = buttons.find((button) =>
  button.textContent.includes('保存')
);

const buttons = [...document.querySelectorAll('button')];

const target = buttons.find((button) =>
  button.textContent.includes('保存')
);

「ボタンの文言で絞り込みたい」ときによく使う形です。

closestで親要素を取る方法

クリックしたいボタン自体ではなく、「そのボタンを含む行」や「親カード全体」を取りたいこともあります。

そのときに便利なのが closest です。

const button = document.querySelector('.edit-button');

if (button) {
  const card = button.closest('.user-card');
  console.log(card);
}

const button = document.querySelector('.edit-button');

if (button) {
  const card = button.closest('.user-card');
  console.log(card);
}

closest は、自分自身を含めて近い親要素をたどって探します。一覧画面の1行だけを操作したいときなどに役立ちます。

Tampermonkeyでよく使うDOM操作

要素を取得したあとによくやる処理は、だいたい次の4つです。

クリックする

const button = document.querySelector('.submit-button');

if (button) {
  button.click();
}

const button = document.querySelector('.submit-button');

if (button) {
  button.click();
}

テキストを読む

const title = document.querySelector('.page-title');

if (title) {
  console.log(title.textContent);
}

const title = document.querySelector('.page-title');

if (title) {
  console.log(title.textContent);
}

入力値を変える

const input = document.querySelector('input[name="company"]');

if (input) {
  input.value = 'サンプル株式会社';
}

const input = document.querySelector('input[name="company"]');

if (input) {
  input.value = 'サンプル株式会社';
}

スタイルを変える

const panel = document.querySelector('.notice');

if (panel) {
  panel.style.backgroundColor = '#fff4cc';
}

const panel = document.querySelector('.notice');

if (panel) {
  panel.style.backgroundColor = '#fff4cc';
}

要素を追加する

const box = document.querySelector('.toolbar');

if (box) {
  const button = document.createElement('button');
  button.textContent = '自分用ボタン';
  box.appendChild(button);
}

const box = document.querySelector('.toolbar');

if (box) {
  const button = document.createElement('button');
  button.textContent = '自分用ボタン';
  box.appendChild(button);
}

Tampermonkeyでは、既存要素を触るだけでなく、自分用のボタンや補助表示を追加することも多いです。

要素があとから出るときの考え方

最近のWebページでは、ページ読み込み後にあとから要素が出てくることも多いです。

その場合、読み込み直後に querySelector すると見つからないことがあります。

window.addEventListener('load', () => {

  const button = document.querySelector('.submit-button');

  if (button) {
    button.click();
  }

});

window.addEventListener('load', () => {

  const button = document.querySelector('.submit-button');

  if (button) {
    button.click();
  }

});

これでも取れないときは、表示タイミングを待つ必要があります。

少し待つ例

window.addEventListener('load', () => {

  setTimeout(() => {

    const button = document.querySelector('.submit-button');

    if (button) {
      button.click();
    }

  }, 1000);

});

window.addEventListener('load', () => {

  setTimeout(() => {

    const button = document.querySelector('.submit-button');

    if (button) {
      button.click();
    }

  }, 1000);

});

監視する例

const observer = new MutationObserver(() => {

  const button = document.querySelector('.submit-button');

  if (button) {
    button.click();
    observer.disconnect();
  }

});

observer.observe(document.body, {
  childList: true,
  subtree: true,

});

const observer = new MutationObserver(() => {

  const button = document.querySelector('.submit-button');

  if (button) {
    button.click();
    observer.disconnect();
  }

});

observer.observe(document.body, {
  childList: true,
  subtree: true,

});

要素が取れないときの確認ポイント

初心者がつまずきやすいのは、次のようなケースです。

セレクタが違う

クラス名や属性名が思っていたものと違うと、当然ですが取得できません。

まずは開発者ツールで対象要素を見て、実際のHTMLを確認するのが近道です。

確認するときは、次の順で見ると整理しやすいです。

対象要素に id があるか
安定していそうなクラス名があるか
name や data-* 属性が使えそうか
テキストで絞る必要があるか

同じ要素が複数ある

button だけで取ると、狙っていないボタンを拾うことがあります。

その場合は、クラス名や属性、テキストで絞り込みます。

要素がまだ表示されていない

SPAやモーダルでは、読み込み直後に存在しないことがあります。

その場合は load、setTimeout、MutationObserver の順で考えると整理しやすいです。

初心者向けの使い分け

迷ったときは、次の順で試すと扱いやすいです。

まずは ID や属性で1つに絞る
取れなければクラス名を確認する
複数候補があるなら querySelectorAll で絞り込む
親要素ごと扱いたいなら closest を使う
表示タイミングが遅いなら待機処理を足す

いきなり複雑なセレクタを書くより、「まず1個取れるか」を確認しながら進めるほうが安全です。

実用例

この考え方は、既存の子記事ともそのままつながります。

自動クリック記事では、押したいボタンを取る
フォーム入力記事では、入力欄やチェックボックスを取る
画面カスタマイズ記事では、隠したいパネルや強調したい要素を取る

つまり、DOM操作の基礎はTampermonkey記事群の土台です。

まとめ

Tampermonkeyで要素を取得する方法を理解すると、実用スクリプトの幅がかなり広がります。

querySelector は1つ取るときの基本
querySelectorAll は複数候補から選ぶときに便利
取れないときはセレクタと表示タイミングを疑う

Tampermonkeyで何かを自動化したいときは、まず「どの要素をどう取るか」から考えると整理しやすくなります。

Tampermonkeyで要素を取得する方法｜querySelectorとDOM操作入門