Web Development

Introduction to Slick – A Standalone Element Selector Engine

Hi friends, in this post I will explain the power of Java Script to select the HTML elements using css selectors faster than ever before. Yes I am referring to the Slick – A standalone DOM selector engine.

Slick is a new standalone CSS selector parser and DOM selector engine.

MooTools Core 1.3 includes Slick, a new standalone engine. Slick is the new official MooTools project developer by Thomas Aylott, Fabio Costa and Valerio Proietti with lots of work.

Even if you can’t Use MooTools in your project, you can still use Slick! Its standalone, so instead of Slick requiring anything in MooTools, Core now heavily depended on everything that with Slick.

Slick supports almost every selectors which you can think of and also provide the lots of new selectors which you may though that never possible. The engine is incredibly customizable.

Slick is unparalleled in its accuracy. MooTools team has developed an implementation nonbeliever test suit called SlickSpec. It includes over 3000 tests that cover the gamut from the wildest Unicode edge case to insanely complex interaction when switching between multiple contexts and documents in more doctypes than you could stick.shake() at.

Stay tuned for the updated related to Slick and also release of the dedicated website for the Slick.

Some examples for Slick Selector:

All div elements and p with the class ‘moo’

[cc lang=”javascript”]myElement.getElements(‘div, p.moo’);[/cc]

All direct child div elements with the class ‘cow’

[cc lang=”javascript”]myElement.getElements(‘> div.cow’);[/cc]

Search for the first parent that matches ‘div.cow’, matches the next ‘div’ sibling and returns the first input element that it contains. Ain’t that awesome?

[cc lang=”javascript”]myElement.getElement(‘! div.cow ~ div input’);[/cc]

  • Using the barF iframe document as the starting point context
  • Find me the first div
  • whose direct parent is a blockquote
  • whose next sibling is a ul
  • who contains an element with the id foo.

[cc lang=”javascript”]Slick.find(barF, ‘#foo ! ul !~ blockquote > div’);[/cc]

Hope you find this post helpful for you, let me know by commenting here.


Leave a Reply

Your email address will not be published. Required fields are marked *