Добавление селектора запросов HTML5 в браузеры не поддерживает его

Question

Я использую HTML5 селектор API aka querySelector все время.Эти селекторы действительно просты в использовании и несколько.Если вы не знакомы с этим API, он очень похож на API выбора jQuery, они получают строку выбора CSS и выбирают правильные элементы.Например, эти селекторы работают одинаково:

jQuery('#div') == document.querySelectorAll('#div')

jQuery('.myClass a') == document.querySelectorAll('.myClass a');

Поддержка браузера этого API довольно хороша.IE8 поддерживает их.Единственными двумя браузерами, которые не поддерживают этот API, являются IE7 и IE6.Я ищу решение, чтобы добавить эту функциональность в IE7 и IE6.Для меня достаточно querySelectorAll и querySelector, но если бы был способ реализовать больше функций, было бы здорово!

Я начал изучать код jQuery , они делали это раньшебыло бы хорошо посмотреть, как они создали селекторный API, но я не понял код.Есть идеи?

Answer 1

Вы можете просто использовать оригинальный Sizzle движок, который использует jQuery (написанный Джоном Резигом, автором jQuery).

Вот собственное описание Sizzle:

Селекторный движок CSS с чистым JavaScript, разработанный для легкого добавления в библиотеку хоста.

---

Если вы хотите быть уверенным, что вы не используете Sizzle, если querySelectorAllизначально поддерживается (хотя Sizzle всегда будет использовать querySelectorAll, когда доступно), используйте это:

if ( ! document.querySelectorAll ) document.querySelectorAll = Sizzle;

Answer 2

Обычно плохая идея использовать сложные селекторы для поиска элементов, поскольку они тесно связывают функциональность скрипта с макетом и представлением документа.Следует использовать более простую стратегию, например, использовать идентификаторы, классы или элементы группировки в документе.

Если вы сделаете это, то проанализируете свои требования, вы можете обнаружить, что вам нужна только пара простых селекторов.В этом случае стандартные методы доступа к элементам DOM могут выполнять 90% работы, и вам просто нужно добавить немного фильтрации.например, «#id» - это просто getElementById (именно это jQuery / Sizzle фактически использует для этого селектора), а «.myClass a» может использовать довольно простую функцию getElementsByClassname (у большинства браузеров есть одна встроенная) с фильтром для элементов A.

Конечно, такие функции могут сначала проверить поддержку qSA и использовать ее, если она доступна.

Обратите также внимание на то, что уже имеется несколько доступных коллекций документов, которые могут быть очень эффективными в использовании, итакже ранние коллекции DOM (такие как getElementsByTagName) были также живы.Я почти уверен, что qSA возвращает статические коллекции, потому что именно это делали библиотеки javascript с селекторами.

Во всяком случае, пища для размышлений.