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

Question

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

编辑：为清楚起见，按ID（#<id>），类（.<class>）等进行搜索可以正常工作。但是我只想按元素类型搜索。

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

Answer 1

搜索“ <form”

^{假设您正在谈论GC开发人员工具的“元素”标签}

Answer 2

Chrome开发工具支持通过XPath查找元素，因此，无论父元素是什么，您都可以使用搜索词//form查找已加载文档中form标签的所有实例。

Firefox似乎没有任何便利功能。您必须使用$("form")这样的Javascript命令行函数来找到它。

Answer 3

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

<form会发现两个元素都以<form，和字符串“

同样，XPath表达式//form会找到两个与该XPath匹配的元素，分别是和字符串“ // form”。

在Firefox中，您可以使用选择器，例如* form，* > form，:root form，form:not(_)或form:nth-child(n)，但这些 all 与其他两种浏览器一样，都具有同样的弱点，解决此问题的唯一方法是尽可能缩小搜索范围，以减少匹配页面内容的机会。