346
 

Выборка элементов по CSS селектору

Я думаю большинство из нас привыкли к более продвинутому методу получения элементов DOM, чем простые document.getElementById() или document.getElementsByTagName(). В большинстве современных JavaScript фреймворков используются функции позволяющие получать коллекцию элементов по CSS селектору:

var elems = $('.list li a');

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

Однако, ничто не стоит на месте, и все меняется с приходом новых стандартов и новых браузеров. Так, в новом стандарте Selectors API имеются функции document.querySelector() и document.querySelectorAll(), способные делать выборку элементов по CSS. Реализация этих функций на уровне браузера даст возможность избавиться от необходимости добавлять вышеупомянутые скрипты во фреймворки, значительно увеличит производительность и ёмкость скриптов.

До сих пор обе эти функции были реализованы в Webkit и Internet Explorer 8 beta, но буквально на днях вышла новая версия Firefox 3.1 alpha, где одним из новшеств являются CSS селекторы.

Типичное применение:

var elem = document.querySelector('#myelem');
var elems = document.querySelectorAll('ul > li:not(".selected"):hover');

Дабы придать функциям более привычный вид, можно использовать следующий прием (об этом писал Dustin Diaz):

var $$ = function(q, b) {
  if (b) {
    return document.querySelector(q);
  } else {
    return document.querySelectorAll(q);
  }
};

Если в качестве второго параметра передаем true, то используется querySelector, возвращающий единственный элемент, если этот параметр не указан, то тогда используется querySelectorAll, который в свою очередь возвращает коллекцию элементов nodeList. Чтобы преобразовать полученный nodeList в массив, можно использовать функцию slice():

var nodes = [].slice.call($$('ul > li:not(".selected"):hover'), 0);

Последним из наиболее популярных браузеров, где пока не реализованы эти функции, это Opera, но и там не все так плохо, ибо работы над этим уже ведутся.

Добавить в закладки:

Комментарии на “Выборка элементов по CSS селектору”

  1. Хорошая статья. Обязательно буду применять эту технологию, ибо постоянно юзаю CSS

  2. Хм… Когда-то у самого возникала мысль реализовать такое в виде плагина к FF, но никак не ожидал что это будут двигать как стандарт. В принципе такие нововведения должны качественно толкнуть произвоительность JS-фреймворков а также уменьшить их размер (при условии условной динамической загрузки реализации ф-кций аля $ и $$).

    Немного не в тему: А никто не встречал в природе ServerBased HTML-парсер, основанный на CSS-селекторах?
    Уж больно не хочется играться с HTML => Tidy => XML => XPath.

Оставить комментарий

JSToolbox создан на основе WordPress