Статьи

cssQuery (): запрос DOM с помощью селекторов CSS

Декабрь 19, 2018

(Через Planet Web 2.0 ) cssQuery () , новая библиотека JavaScript от Дина Эдвардса, известная как сценарий IE7 , располагается поверх Document Object Model (DOM) и позволяет получать ссылки на элементы документа с использованием синтаксиса селектора CSS.

DOM — это мощный и эффективный API для чтения, записи и изменения документов HTML и XML. Используется с JavaScript, это основа эффектов DHTML. Но мальчик может иногда требовать много кода.

Рассмотрим этот небольшой фрагмент из скрипта сортировки таблиц, который мы используем здесь на SitePoint: 

function sortables_init() {
    // Find all tables with class sortable and make them sortable
    if (!document.getElementsByTagName) return;
    tbls = document.getElementsByTagName("table");
    for (ti=0;ti<tbls.length;ti++) {
        thisTbl = tbls[ti];
        if (((' '+thisTbl.className+' ').indexOf("sortable") != -1) && (thisTbl.id)) {
            ts_makeSortable(thisTbl);
        }
    }
}

Этот код очень хорош, но на самом деле все, что он делает, это вызывает функцию ts_makeSortable для каждого элемента таблицы с примененным к нему классом sorttable. Вот как будет выглядеть код с помощью cssQuery (): 

 function sortables_init() {
    // Find all tables with class sortable and make them sortable
    tbls = cssQuery("table.sortable");
    for (ti=0;ti<tbls.length;ti++) {
        ts_makeSortable(tbls[ti]);
    }
}

В типичном сценарии DHTML экономия кода, которую он может обеспечить, ошеломляет. Конечно, вы теряете небольшую производительность, поскольку ваши селекторы CSS должны анализироваться и интерпретироваться в чистом JavaScript, но пока еще немногие приложения JavaScript ставят браузеры на колени.

cssQuery () поддерживает все селекторы CSS1 и CSS2 , а также множество селекторов CSS3 . Черт возьми, это лучше, чем большинство современных веб-браузеров — и все это написано на чистом JavaScript!

Обновление: Саймон Виллисон создал аналогичную библиотеку getElementsBySelector () еще в марте 2003 года. Она не поддерживает столько типов селекторов CSS, но, вероятно, имеет больше, чем вам когда-либо понадобится в повседневном использовании. Скорее всего, это легче в результате.

45
Share: