选择器小工具如何工作?
selectgadget.com 如何运作?是否有任何链接/页面可以解释selectorgadget背后的算法?
谢谢
How selectorgadget.com works? Is there any link/page that explain the algorithm behind selectorgadget?
thanks
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
标记化主要是为了让单击的元素集的 CSS 选择器可以一起进行比较以找到共性。然后,算法尝试找到“最佳”选择器,该选择器包含所选集中的所有内容,但不包含被拒绝集中的任何内容。
它是这样的:
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:
您可以自己检查来源以获得详细答案。所有“将此链接拖到书签栏”所做的就是设置一个 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.