html - 为什么 devtool 中的搜索结果数量急剧下降？

Question

我在 devtool 中执行了一个简单的搜索，但它无缘无故地急剧下降：

而且，如果我查看源并进行相同的搜索，结果的数量<link rel只有58个，而不是184个。你知道为什么吗？

_{如果您需要检查，这是页面。}

标签： htmlsearchgoogle-chrome-devtools

Answer 1

Devtools 使用 CDP 命令DOM.performSearch并根据它尝试匹配这些类型的查询的实现来判断：

• text- 在 #text 节点内（如 js 中的 textContent）

• text- 内部标签名称

• text- 内部属性名称

• text- 内部属性值

• <tag- 在标签名称的开头匹配

• </tag- 匹配结束标签

• tag>- 在标签名称的末尾匹配

• <tag>- 匹配整个标签名称

• "text- 在属性值的开头匹配

• text"- 在属性值的末尾匹配

• text- 匹配整个属性值

• //a[contains(., 'foo')]- XPath 选择器

• a#foo.class[attr]- CSS 选择器

如您所见，文字文本匹配仅限于前四种类型，它不会找到attr="value"跨越两种类型的东西。

对于这些“复杂”的查询，您必须使用 XPath 或 CSS：

• //link[@rel]
• //link[contains(@rel,'style')]

对于像a使用这样的琐碎 CSS 选择器html a，以确保它与文字文本不匹配。