dizzle - npm explorer

!https://cdn.svarun.dev/gh/varunsridharan/dizzle/banner.jpg

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:

``html`

Dizzle is also available through npm as the dizzle package:

npm install --save dizzle

That you can then use like this:

`javascript import dizzle from "dizzle";

dizzle.find('div.myelement');`

`Documentation`

$3

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

/** * Fetches All H2 Elements in document * and loops into results and find span element in each h2 element */ var $h2 = dizzle('h2'); $h2.forEach(function(element){ console.log(dizzle('span',element)); });`

`$3`

javascript
/**
 * Fetches All H2 Elements in document
 * and loops into results and find span element in each h2 element
 */
var $h2 = dizzle('h2');
$h2.forEach(function(element){
   
    if(dizzle.is(':visible',element)){
        // your code if h2 is visible 
    }
});

$3

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


Custom Adapter Support

javascript
const customAdapter = {
	attr: function( elem, attrName ) {
		if( 'custom-Name' === attrName ) {
			return elem.getAttribute('customName');
		}
		return elem.getAttribute( attrName );
	}
};

const attr = dizzle('[custom-Name="Yes"]',null,customAdapter)`

`$3`


A custom adapter must implement the following functions:
    isTag, getChildren, getParent, attr, getSiblings, getTagName
    
Please check src/adapter.js for more information
Custom adapters can be passed for all the below functions

`javascript /** * @param selector String * @param context Parent Element / Root * @param adapter Custom Adapter Function */ dizzle( selector, context, adapter );

/** * @param selector String * @param elem Single Element Object * @param adapter Custom Adapter Function */ dizzle.is( selector, elem, adapter )

/** * @param selector String * @param elems Array of elements * @param adapter Custom Adapter Function */ dizzle.filter( selector, elems, adapter )

`Supported Selectors`


| Combinators | Attributes | Pseudo |
| :--- | :---: | ---: |
|

> Child | = | :empty

|
|

+ Adjacent | != | :disabled

|
|

~ General Sibling | \|= | :enabled

 | 
|

Descendant | *= | :lang

 |
| |

~= | :visible

 |
| |

$= | :hidden

 |
| |

^= | :contains

 |
| | |

:first-child

 |
| | |

:last-child

 |
| | |

:first-of-type

 |
| | |

:last-of-type

 |
| | |

:even

 |
| | |

:odd

 |
| | |

:gt

 |
| | |

:lt

 |
| | |

:eq

 |
| | |

:first

 |
| | |

:last

 |
| | |

:nth-of-type

 |
| | |

:nth-last-of-type

 |
| | |

:nth-last-child

 |
| | |

:checked

 |
| | |

:input

 |
| | |

:button

 |
| | |

:parent

 |
| | |

:selected

 |
| | |

:text

 |
| | |

:only-child

 |
| | |

:only-of-type

 |
| | |

:has

 |
| | |

:not

 |
| | |

:radio

 |
| | |

:checkbox

 |
| | |

:file

 |
| | |

:password

 |
| | |

:image

 |
| | |

:submit

 |
| | |

:reset

 |
Combinators
$3

The child selector selects all elements that are the children of a specified element.

javascript
dizzle('div > p > span');


$3

The adjacent sibling selector selects all elements that are the adjacent siblings of a specified element.

javascript
dizzle('div.copyright > p.content + span.year');


$3

The general sibling selector selects all elements that are siblings of a specified element.

javascript
dizzle('p ~ span');


$3

The descendant selector matches all elements that are descendants of a specified element.

javascript
dizzle('div p span');

---

📝 Changelog

All notable changes to this project will be documented in this file.

The format is based on Keep a Changelog,
and this project adheres to Semantic Versioning.

Checkout CHANGELOG.md

🤝 Contributing

If you would like to help, please take a look at the list of issues.

💰 Sponsor

[I][twitter] fell in love with open-source in 2013 and there has been no looking back since! You can read more about me [here][website].
If you, or your company, use any of my projects or like what I’m doing, kindly consider backing me. I'm in this for the long run.

- ☕ How about we get to know each other over coffee? Buy me a cup for just [$9.99][buymeacoffee]
- ☕️☕️ How about buying me just 2 cups of coffee each month? You can do that for as little as [$9.99][buymeacoffee]
- 🔰 We love bettering open-source projects. Support 1-hour of open-source maintenance for [$24.99 one-time?][paypal]
- 🚀 Love open-source tools? Me too! How about supporting one hour of open-source development for just [$49.99 one-time ?][paypal]

📜 License & Conduct

- General Public License v3.0 license © Varun Sridharan
- Code of Conduct

📣 Feedback

- ⭐ This repository if this project helped you! :wink:
- Create An 🔧 Issue if you need help / found a bug

Connect & Say 👋

- Follow me on [👨‍💻 Github][github] and stay updated on free and open-source software
- Follow me on [🐦 Twitter][twitter] to get updates on my latest open source projects
- Message me on [📠 Telegram][telegram]
- Follow my pet on [Instagram][sofythelabrador] for some _dog-tastic_ updates!

---

Built With ♥ By Varun Sridharan 🇮🇳

---

[paypal]: https://sva.onl/paypal
[buymeacoffee]: https://sva.onl/buymeacoffee
[sofythelabrador]: https://www.instagram.com/sofythelabrador/
[github]: https://sva.onl/github/
[twitter]: https://sva.onl/twitter/
[telegram]: https://sva.onl/telegram/
[email]: https://sva.onl/email
[website]: https://sva.onl/website/

[composer]: https://sva.onl/composer/
[downloadzip]:https://github.com/varunsridharan/vsp-framework/archive/master.zip
[wpcsl]: https://github.com/WordPress-Coding-Standards/WordPress-Coding-Standards/

!https://cdn.svarun.dev/gh/varunsridharan/dizzle/banner.jpg

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:

``html`

Dizzle is also available through npm as the dizzle package:

npm install --save dizzle

That you can then use like this:

`javascript import dizzle from "dizzle";

dizzle.find('div.myelement');`

`Documentation`

$3

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

`$3`

javascript
/**
 * Fetches All H2 Elements in document
 * and loops into results and find span element in each h2 element
 */
var $h2 = dizzle('h2');
$h2.forEach(function(element){
   
    if(dizzle.is(':visible',element)){
        // your code if h2 is visible 
    }
});

$3

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


Custom Adapter Support

javascript
const customAdapter = {
	attr: function( elem, attrName ) {
		if( 'custom-Name' === attrName ) {
			return elem.getAttribute('customName');
		}
		return elem.getAttribute( attrName );
	}
};

const attr = dizzle('[custom-Name="Yes"]',null,customAdapter)`

`$3`


A custom adapter must implement the following functions:
    isTag, getChildren, getParent, attr, getSiblings, getTagName
    
Please check src/adapter.js for more information
Custom adapters can be passed for all the below functions

`javascript /** * @param selector String * @param context Parent Element / Root * @param adapter Custom Adapter Function */ dizzle( selector, context, adapter );

/** * @param selector String * @param elem Single Element Object * @param adapter Custom Adapter Function */ dizzle.is( selector, elem, adapter )

/** * @param selector String * @param elems Array of elements * @param adapter Custom Adapter Function */ dizzle.filter( selector, elems, adapter )

`Supported Selectors`


| Combinators | Attributes | Pseudo |
| :--- | :---: | ---: |
|

> Child | = | :empty

|
|

+ Adjacent | != | :disabled

|
|

~ General Sibling | \|= | :enabled

 | 
|

Descendant | *= | :lang

 |
| |

~= | :visible

 |
| |

$= | :hidden

 |
| |

^= | :contains

 |
| | |

:first-child

 |
| | |

:last-child

 |
| | |

:first-of-type

 |
| | |

:last-of-type

 |
| | |

:even

 |
| | |

:odd

 |
| | |

:gt

 |
| | |

:lt

 |
| | |

:eq

 |
| | |

:first

 |
| | |

:last

 |
| | |

:nth-of-type

 |
| | |

:nth-last-of-type

 |
| | |

:nth-last-child

 |
| | |

:checked

 |
| | |

:input

 |
| | |

:button

 |
| | |

:parent

 |
| | |

:selected

 |
| | |

:text

 |
| | |

:only-child

 |
| | |

:only-of-type

 |
| | |

:has

 |
| | |

:not

 |
| | |

:radio

 |
| | |

:checkbox

 |
| | |

:file

 |
| | |

:password

 |
| | |

:image

 |
| | |

:submit

 |
| | |

:reset

 |
Combinators
$3

The child selector selects all elements that are the children of a specified element.

javascript
dizzle('div > p > span');


$3

The adjacent sibling selector selects all elements that are the adjacent siblings of a specified element.

javascript
dizzle('div.copyright > p.content + span.year');


$3

The general sibling selector selects all elements that are siblings of a specified element.

javascript
dizzle('p ~ span');


$3

The descendant selector matches all elements that are descendants of a specified element.

javascript
dizzle('div p span');

---

📝 Changelog

All notable changes to this project will be documented in this file.

The format is based on Keep a Changelog,
and this project adheres to Semantic Versioning.

Checkout CHANGELOG.md

🤝 Contributing

If you would like to help, please take a look at the list of issues.

💰 Sponsor

📜 License & Conduct

📣 Feedback

- ⭐ This repository if this project helped you! :wink:
- Create An 🔧 Issue if you need help / found a bug

Connect & Say 👋

---

Built With ♥ By Varun Sridharan 🇮🇳

---