如何使用浏览器网络开发工具仅搜索 HTML 个元素？

Question

我希望浏览器开发工具源代码搜索在页面上找到特定类型的每个 HTML 元素，比方说 <form>。我认为 CSS 选择器只是 form，但在 DevTools 搜索中，form 也 returns 每个包含 "form" 的字符串（例如 "format" ).如何只搜索元素？

编辑：澄清一下，按 ID (#<id>)、classes (.<class>) 等搜索效果很好。但我只想按元素类型搜索。

编辑 2：哇，我虽然开发工具搜索应该只通过 CSS 选择器搜索，但它总是同时进行 CSS 和文本搜索。例如，我认为按 .myclass 搜索只会找到带有 class myclass 的元素，但它也会找到文本 ".myclass"。吸取教训。

Answer 1

搜索“<form”

^{假设您谈论的是 GC 开发人员工具的“元素”选项卡}

Answer 2

Chrome Dev Tools 支持通过 XPath 查找元素，因此您可以使用搜索词 //form 在加载的文档中查找 form 标记的所有实例，无论父级如何元素。

Firefox 似乎没有任何类似的便利功能。您必须使用 Javascript 命令行函数找到它，如下所示：$("form").

Answer 3

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

<form 将在 HTML 源中为您找到任何匹配的元素：

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

XPath 表达式 //form 同样会在 HTML 源中找到匹配的两个元素：

• (X)HTML 元素（标签）为此 XPath
命名为 form
• 和 页面内容中的字符串“//form”

火狐

对于 Firefox，Firefox 开发者工具的 MDN 文档 解释了 Examine and edit HTML, section "Searching" 中的 3 个搜索选项：

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.

在您的情况下，这可能是例如以下 CSS selectors:

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

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

的机会