【HTML】 開発ツール(デベロッパーツール)で要素だけを検索する

この記事は約2分で読めます。
記事内に広告が含まれています

インスペクターの画面

こんにちは、さち です。

先日、ウェブブラウザーの「開発ツールデベロッパーツール)」の「インスペクター要素)」を使って HTML 要素を検索していたのですが、「文字列」まで一致してしまいとても不便でした。

ということで、「文字列」を除外して「HTML 要素」だけを検索する方法を探してみます。

スポンサーリンク

文字列まで一致する

  1. YouTube の動画ページを開いている状態です。
    YouTube の画面
  2. ウェブブラウザーの「開発ツールデベロッパーツール)」を開き、video と入力して HTML の <video> タグを検索してみます。
    インスペクターの画面
  3. しかし、「video」という文字列を持つ <link> タグと一致してしまいました。検索結果は「1019件」もあり、このまま検索を続けるのは大変そう……。
    インスペクターの画面

解決方法

  1. YouTube の動画ページを開いている状態です。
    YouTube の画面
  2. ウェブブラウザーの「開発ツールデベロッパーツール)」を開き、* video と入力して HTML の <video> タグを検索します。
    インスペクターの画面
  3. <video> タグだけを検索できました。
    インスペクターの画面

この記述方法では最上位要素(ルート要素)である <html> タグだけは検索できませんが、最初にあって簡単に探せるので問題ないですね。

* video は「何かしらの要素(タグ)から見て『子孫』の位置にある <video> タグ」という意味になります。そのため「文字列」は検索対象外になります。

コメント

タイトルとURLをコピーしました