如何使用浏览器Web开发工具仅搜索HTML元素? [英] How to search for only HTML elements using browser web dev tools?

问题描述

我希望浏览器开发工具的源代码搜索可以找到页面上某种类型的每个HTML元素，例如< form> .我认为CSS选择器就是 form ，但是在DevTools搜索中， form 也会返回每个包含"form"(例如"format")的字符串.如何仅搜索元素?

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?

为明确起见，按ID(#< id> )，类(.< class> )等进行搜索是可以的.但是我只想按元素类型进行搜索.

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

哇，虽然开发人员工具搜索本来只能通过CSS选择器进行搜索，但是它总是同时使用CSS和文字搜索.例如，我认为通过 .myclass 进行搜索只会找到具有 myclass 类的元素，但还会找到文本.myclass" .经验教训.

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.

推荐答案

没有任何可靠的方法来保证您只能在任何浏览器中找到元素，而不能找到包含搜索项的字符串.

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

< form 将在HTML源代码中找到与以下内容匹配的任何元素:

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

• 开始标签以< form
开头
• 和字符串< form"在页面内容
中

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

XPath 表达式//form 同样是会找到两个与HTML源代码中的元素匹配的元素:

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

• (X)HTML元素(标签)为此XPath的 form
• 和字符串"//form"在页面内容
中

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

对于 Firefox ， Firefox开发人员工具的MDN文档说明了:

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

根据您输入的内容，自动执行三种类型的搜索:全文搜索， CSS选择器搜索和 XPath 搜索.

以您的情况为例，例如，可以使用 CSS选择器:

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

• *表单
• *>表格
• :根表单
• form:not(_)
• form:nth-​​child(n)

但是这些 all 所遭受的弱点与其他浏览器中的上述两者相同.解决此问题的唯一方法是尽可能缩小搜索范围，以减少匹配页面内容的机会.

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.

这篇关于如何使用浏览器Web开发工具仅搜索HTML元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！