Как работает selectorgadget?

Question

Как работает selectorgadget.com? Есть ли какая-нибудь ссылка / страница, которая объясняет алгоритм позади selectorgadget?

спасибо

Answer 1

Токенизация в основном выполняется для того, чтобы CSS-селекторы для набора элементов, по которым щелкали, можно было объединить, чтобы найти общие черты. Затем алгоритм пытается найти «лучший» селектор, который содержит все в выбранном наборе и ничего в отклоненном наборе.

Это выглядит примерно так:

1. Для каждого выбранного dom-узла сгенерируйте длинный, включающий css-селектор, который настолько специфичен, насколько это возможно.
2. Различаем все селекторы выбранного узла dom вместе, чтобы найти общий селектор css, который выберет все из них.
3. Итеративно уменьшайте этот общий селектор, гарантируя, что он выбирает все в наборе «выбранные» и ничего в наборе «отклоненных». Это происходит в 'simpifyCss' и является эвристическим подходом, который жадно удаляет элементы с предопределенным порядком предпочтения.

Answer 2

Вы можете сами изучить источник, чтобы получить подробный ответ. Все, что «перетаскивает эту ссылку на панель закладок» - это установка закладки javascript, которая создает элемент скрипта на странице с исходным значением http://www.selectorgadget.com/stable/lib/selectorgadget.js?raw=true

Если вы посмотрите на этот скрипт, вы увидите его, а затем импортируете другие для выполнения работы. Короткая версия состоит в том, что он использует токенизацию и рекурсивный анализ элементов DOM для определения путей селектора CSS. Основная часть работы выполнена здесь: http://www.selectorgadget.com/stable/lib/dom.js.