QuerySelectorAll на практиці
Методelement.querySelectorAll("css query") був введений у браузери вже досить давно, але, чесно кажучи, я не зустрічав особливо статей про нього. Що ж, виправимо цю ситуацію.
Що це таке?
Напевно, Ви знайомі з jQuery. І напевно знаєте про функцію $, що повертає елементи, що відповідають css-селектору (у ранніх версіях можна було використовувати XPath, але потім від нього відмовилися).
Так ось, querySelectorAll робить те ж саме, але нативними засобами браузера.
Цей метод є у всіх елементів та документа. Якщо метод викликається у елемента, пошук по селектору проводиться серед усіх елементів, вкладених у нього.
Підтримується всіма сучасними браузерами, Internet Explorer починаючи з версії 8.
Так ось, querySelector майже те ж саме, що і querySelectorAll, але повертає тільки один (перший трапився) елемент, або Null.
Переваги
Як не парадоксально, в тій же Опері .querySelectorAll("div") і .querySelectorAll(".my") працює приблизно вдвічі швидше, ніж .
Отже, а з чим його можна їсти?
Якщо Ви здійснюєте траверс по селектору без використання: animated та інших специфічних для jQ псевдокласів, можна використовувати
На обгортання staticNodeList в об'єкт jQuery, звичайно, піде якийсь час, але загалом такий код виконається швидше.
У Firefox 3.6 статус так і залишиться залиплим на hovered. Це пов'язано з тим, що в цьому чудовому браузері на момент mouseout css стиль ще не оновився. При цьому на mouseover працює відмінно. Тобто виходить, що Firefox оновлює css між mouseout і mouseover . На мою думку, це нелогічно і неправильно.Розробники Firefox, виправте це, будь ласка!
Але повернемося до функції isHovered() . Працює вона на одному досить простому припущенні: якщо у батька елемента є елементи, на які наведено курсор, і один із цих елементів (нульовий у масиві, траверс починається з безпосередніх дітей) — сам вихідний елемент, то вихідний елемент наведено курсор.
У documentElement батько — document , відповідно, код теж працює. У document ж батька немає, але й hover для нього безглуздий.
Як Ви вже, напевно, здогадалися, у такий же нехитрий спосіб можна визначити, а який інпут має фокус відразу при завантаженні сторінки.
Висновок
Як бачите, метод досить потужний та швидкий. Не без гострих країв і поки що не універсальний, але все-таки
Само собою, це не єдине застосування, просто think portals CSS.
І просто прошу, якщо щось можна зробити на «голому» CSS, не варто взагалі робити це яваскриптом.