Реактивные веб-сайты Николай Мациевский Евгений ...

320РЕАКТИВНЫЕ ВЕБ-САЙТЫСелект через querySelectorAllНо это все подходит только для элементарных селекторов. А на практикеприходится обычно использовать намного более сложные конструкции.И для них в современных браузерах FireFox 3.0, Safari 3.2, Opera 9.5,а также в IE8, появились функции querySelector и querySelectorAll.Они, соответственно, предназначены для поиска одной или несколькихнод по CSS3-селекторам. Если браузер клиента поддерживает эту функцию,то все, о чем написано в прошлом пункте, — отпадает, и поиск происходитчерез querySelectorAll.$("#id .class tag")В лучшем случае селектор будет обработан именноquerySelectorAll, потому что он написан по правилам CSS3. Но такоевозможно не со всеми селекторами: jQuery поддерживает ряд селекторов,которые не входят в CSS3, такие, например, как :visible.$("#id .class tag:visible")Такой селектор выдаст ошибку в функции querySelectorAll, и селекторбудет перенаправлен в поисковый движок Sizzle, где строка будет разбитана простые селекторы и превратится, по сути, в несколько разных поисков,в котором каждым следующим контекстом является предыдущийселектор.$(document).find("#id").find(".class").find("tag").filter(":visible")Скорость этого метода поиска напрямую зависит от величины DOMдерева:чем оно больше, тем медленнее, — но ее можно значительно увеличить,написав селектор раздельно.$("#id .class tag").filter(":visible")При этом querySelectorAll выберет все ноды, а Sizzle разберется с”:visible”.По поводу псевдо-селекторов возникает также очень интересный вопрос:CSS3 поддерживает несколько видов псевдо-классов, такие как:nth-of-type/:nth-child/:parent/:not/:checked , jQuery имеет свою реализациюэтих селекторов для браузеров, не поддерживающихquerySelectorAll, или для браузеров, в которых querySelectorAll неподдерживает данный селектор, но эта реализация иногда отличается.