#javascript Dizzle - CSS Selector Library

Hello All,

I am really proud to share my new javascript Library called Dizzle,

What is Dizzle ?

Dizzle turns CSS selectors into functions that tests if elements match them. When searching for elements, testing is executed "from the top", similar to how browsers execute CSS selectors.

Features:

• Full implementation of CSS 3 & CSS 4 selectors
• Partial implementation of jQuery Extensions
• Pretty good performance
• Light Weight

Why this library is created when jQuery does this ?

Long story short i wanted to move from jQuery to VanillaJS but then i faced an roadblock that i can't use special css selectors such as :input in VanillaJS to fetch elements due to which i worked on this library.

Please do check our Github Repo for more information :

varunsridharan / dizzle

~ Simple Fast CSS Selector Engine ~

What?

Dizzle turns CSS selectors into functions that tests if elements match them. When searching for elements, testing is executed "from the top", similar to how browsers execute CSS selectors.

Features:

• Full implementation of CSS3 & CSS4 selectors
• Partial implementation of jQuery extensions
• Pretty good performance

Usage

Get Dizzle From jsDelivr and use it like this:

<script src="https://cdn.jsdelivr.net/npm/dizzle/dist/dizzle.umd.min.js"></script>
<script>
  var divs = dizzle('div');
  console.log(divs);
</script>

Dizzle is also available through npm as the dizzle package:

npm install --save dizzle

That you can then use like this:

import dizzle from "dizzle";
dizzle.find('div.myelement');

Documentation

Finding Elements

/**
 * Search For h2 elements inside div in whole document
 */
console.log(dizzle('div > h2'));
/**
 * Fetches

…

View on GitHub

Example Usage

Finding All Input Elements Inside A Form

var $elements = dizzle('div#yourID :input');
console.log($elements);

Filter Elements

/**
 * Filter All Visible H2 tags
 */
var visibleH2 = dizzle.filter(':visible',dizzle('h2'));

Comments

[Bill💡]

I've not had a need to try before, so this is a genuine question. But can you not already use Sizzle (The filter engine that jQuery uses) as a stand-alone library without jQuery? I had a look through the Sizzle source code and the only references to jQuery are in tests, documentation, and benchmarks.

If that's the case, what sets Dizzle apart from Sizzle?

[Varun Sridharan]

Yes Sizzle can be used as standalone library without using jQuery as a dependency
but the main reason I created dizzle was because

1. Sizzle has lots of workarounds for legacy browsers which are not required for any modern browsers.
2. Based on the jQuery team's response ( github.com/jquery/sizzle/issues/473 ) they are already in the process to merge Sizzle into jQuery core and the Sizzle project will be dead. !!

On the other hand, Dizzle does not have any legacy browsers support as sizzle has
instead it uses querySelectorAll to query most elements. it basically tries query using browser API. if that fails then it prases the selector string
and loops into and query's the element

[Bill💡]

ah interesting. Thanks