0

I want the browser dev tools source code search to find every HTML element of a certain type on the page, let's say <form>. I think the CSS selector for that is simply form, yet in DevTools search, form also returns every string containing "form" (e.g. "format"). How do I search for elements only?

Edit: To clarify, searching by IDs (#<id>), classes (.<class>), etc works fine. But I just want to search by element type.

Edit 2: Wow, I though dev tool search was supposed to ONLY search by CSS selector, but it's always doing both CSS & text search. E.g., I thought searching by .myclass would only find elements with the class myclass, but it also finds the text ".myclass". Lesson learned.

Mike B
  • 627
  • 3
  • 11
  • 19
  • 1
    Which browser's dev tools are you using? Can you provide a screenshot of where you're typing the selector? – esqew Aug 20 '18 at 21:37
  • 2
    `document.getElementsByTagName('form')` in console or what specifically are you trying to achieve? – scrappedcola Aug 20 '18 at 21:42
  • @esqew Trying both Chrome & Firefox. They both search for the text "form". As for my method, I'm just doing right click > Inspect, then clicking on the source code area, typing Ctrl+F and searching. Searching for IDs, classes, etc works fine, but I can't figure out how to search by element. – Mike B Aug 20 '18 at 21:47

3 Answers3

4

There isn't any reliable way to guarantee that you only find elements, and not strings containing your search term, in any browser.

<form is going to find you any elements in the HTML source matching that:

  • start tag beginning with <form
  • and the string "<form" in page content

The XPath expression //form, likewise, is going to find you both elements matching that in the HTML source:

  • (X)HTML elements (tags) named form for this XPath
  • and the string "//form" in page content

Firefox

For Firefox the MDN documentation of Firefox Developer Tools explains 3 search-options in Examine and edit HTML, section "Searching":

There are three types of searches that are performed automatically depending on what you enter, a full text search, a CSS selector search, and an XPath search.

In your case this could be for example following CSS selectors:

  • * form
  • * > form
  • :root form
  • form:not(_)
  • form:nth-child(n)

But these all suffer from the same weakness as the two above in other browsers. The only way to work around this is to narrow down your search as much as possible to reduce the chances of matching page content.

hc_dev
  • 8,389
  • 1
  • 26
  • 38
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • I consider the depth and mentioned "weakness" of this answer highly valuable. ️ Thus I spiced it up with a formatting edit and extended it by links. I hope you don't mind and take it as improvement ️ – hc_dev Apr 25 '21 at 17:34
2

Search for "<form"

Assuming you're talking about the "Elements" tab of GC's developer tools

Community
  • 1
  • 1
Chris Happy
  • 7,088
  • 2
  • 22
  • 49
  • Hmm, okay, this works in Chrome but not in Firefox dev tools. – Mike B Aug 20 '18 at 21:54
  • 1
    I think that's the best core function that you'll be able to achieve. You could always use @scrappedcola 's solution or just make GC your favourite browser... :) – Chris Happy Aug 20 '18 at 21:58
  • 1
    TBH, "use GC's dev tools" is my biggest takeaway from this whole thing – Mike B Aug 20 '18 at 22:34
2

Chrome Dev Tools supports finding elements by XPath, so you can use the search term //form to find all instances of the form tag in the loaded document, regardless of parent elements.

Firefox doesn't seem to have any convenience features like that. You'll have to find it using the Javascript command line function like so: $("form").

esqew
  • 42,425
  • 27
  • 92
  • 132