How to search for only HTML elements using browser web dev tools?

Question

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.

Answer 1

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.