选择器小工具如何工作?

发布于 2024-08-26 18:05:51 字数 74 浏览 3 评论 0原文

selectgadget.com 如何运作?是否有任何链接/页面可以解释selectorgadget背后的算法?

谢谢

How selectorgadget.com works? Is there any link/page that explain the algorithm behind selectorgadget?

thanks

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

梦忆晨望 2024-09-02 18:05:51

标记化主要是为了让单击的元素集的 CSS 选择器可以一起进行比较以找到共性。然后,算法尝试找到“最佳”选择器,该选择器包含所选集中的所有内容,但不包含被拒绝集中的任何内容。

它是这样的:

  1. 对于每个选定的 dom 节点,生成一个尽可能具体的长的、包容性的 css 选择器。
  2. 将所有选定的 dom 节点的选择器放在一起进行比较,以找到一个通用的 css 选择器来选择所有这些选择器。
  3. 迭代地减少公共选择器,同时确保它选择“选定”集中的所有内容,而不选择“拒绝”集中的任何内容。这种情况发生在“simplifyCss”中,是一种启发式方法,会贪婪地删除具有预定义优先顺序的元素。

The tokenization is mostly done so that the CSS selectors for the set of elements clicked can be diffed together to find commonalities. Then the algorithm tries to find the 'best' selector that contains everything in the selected set and nothing in the rejected set.

It goes something like:

  1. For every selected dom node, generate a long, inclusive css selector that is as specific as possible.
  2. Diff all of the selected dom node's selectors together to find a common css selector that will select all of them.
  3. Iteratively reduce that common selector while ensuring that it selects everything in the 'selected' set and nothing in the 'rejected' set. This happens in 'simplifyCss' and is a heuristic approach that greedily removes elements with a pre-defined preference order.
相权↑美人 2024-09-02 18:05:51

您可以自己检查来源以获得详细答案。所有“将此链接拖到书签栏”所做的就是设置一个 javascript 书签,该书签会在页面中创建一个脚本元素,其源设置为 http://www.selectorgadget.com/stable/lib/selectorgadget.js?raw=true

如果您查看 脚本,您会看到它,然后导入其他脚本来完成工作。简而言之,它似乎使用 DOM 元素的标记化和递归分析来找出 CSS 选择器路径。大部分工作在这里完成: http://www.selectorgadget.com/stable /lib/dom.js

You could examine the source for yourself to get a detailed answer. All the "drag this link to your bookmark bar" does is set up a javascript bookmark, which creates a script element in the page that has it's source set to http://www.selectorgadget.com/stable/lib/selectorgadget.js?raw=true

If you look at that script, you'll see it then imports others to do the work. The short version is that it appears to use tokenizing and recursive analysis of DOM elements to figure out CSS selector paths. The bulk of the work is done here: http://www.selectorgadget.com/stable/lib/dom.js.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文