Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/varunsridharan/dizzle

~ Simple Fast CSS Selector Engine ~
https://github.com/varunsridharan/dizzle

adjacent-siblings css css-selector css-selector-engines css-selector-parser css3 dizzle javascript javascript-css javascript-css-library jquery jquery-alternative selector-engine sizzle

Last synced: 5 days ago
JSON representation

~ Simple Fast CSS Selector Engine ~

Host: GitHub
URL: https://github.com/varunsridharan/dizzle
Owner: varunsridharan
License: mit
Created: 2020-09-17T10:39:03.000Z (about 4 years ago)
Default Branch: main
Last Pushed: 2020-10-18T14:59:44.000Z (about 4 years ago)
Last Synced: 2024-11-02T03:11:49.737Z (12 days ago)
Topics: adjacent-siblings, css, css-selector, css-selector-engines, css-selector-parser, css3, dizzle, javascript, javascript-css, javascript-css-library, jquery, jquery-alternative, selector-engine, sizzle
Language: HTML
Homepage:
Size: 638 KB
Stars: 37
Watchers: 3
Forks: 3
Open Issues: 1
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE

Awesome Lists containing this project

README

        ![https://cdn.svarun.dev/gh/varunsridharan/dizzle/banner.jpg](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](https://cdn.jsdelivr.net/npm/dizzle/dist/dizzle.umd.min.js) and use it like this:

```html

  var divs = dizzle('div');

  console.log(divs);

```

**Dizzle** is also available through [npm](https://npmjs.com) as the [`dizzle`](https://npmjs.com/package/dizzle) package:

    npm install --save dizzle

That you can then use like this:

```javascript

import dizzle from "dizzle";

dizzle.find('div.myelement');

```

## Documentation

### Finding Elements

```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));

});

```

### IS / Match Element `Pseudo`

```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 

    }

});

```

### Element Filter

```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)

```

### Custom Adapter Functions

A custom adapter must implement the following functions:

    isTag, getChildren, getParent, attr, getSiblings, getTagName

    

Please check [src/adapter.js](https://github.com/varunsridharan/dizzle/blob/main/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](#child-) | `=` | `:empty` |

| [`+` Adjacent](#adjacent-) | `!=` | `:disabled` |

| [`~` General Sibling](#sibling-) | `\|=` | `:enabled` | 

| [` ` Descendant](#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

### Child `>`

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

```javascript

dizzle('div > p > span');

```

### Adjacent `+`

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

```javascript

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

```

### Sibling `~`

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

```javascript

dizzle('p ~ span');

```

### Descendant ` `

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](https://keepachangelog.com/en/1.0.0/),

and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).

[Checkout CHANGELOG.md](/CHANGELOG.md)

## 🤝 Contributing

If you would like to help, please take a look at the list of [issues](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**](LICENSE) © [Varun Sridharan](website)

- [Code of Conduct](code-of-conduct.md)

## 📣 Feedback

- ⭐ This repository if this project helped you! :wink:

- Create An [🔧 Issue](issues/) 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/