Slicky/QuerySelector

CSS selectors implemented in javascript

This library does not depend on any javascript DOM parser and can be used in either browser or node environment.

It can work with native DOM in browser, with parse5 or any other library.

Installation

$ npm install @slicky/query-selector

Custom DocumentWalker

First you will need to implement few methods, which will be used by this library to read the DOM.

Example of the simplest document walker:

import{IDocumentWalker,DocumentNode,DocumentParent}from'@slicky/query-selector';classCustomDocumentWalkerimplementsIDocumentWalker{publicgetNodeName(node: DocumentNode): string{returnnode.nodeName;}publicisElement(node: DocumentNode): boolean{returnnode.type==='string';}publicisString(node: DocumentNode): boolean{returnnode.type==='string';}publicgetParentNode(node: DocumentNode): DocumentParent{returnnode.parentNode;}publicgetChildNodes(parent: DocumentParent): Array<DocumentNode>{returnparent.childNodes;}publicgetAttribute(node: DocumentNode,name: string): string{returnnode.attributes[name];}}

Usage

import{Matcher}from'@slicky/query-selector';letmatcher=newMatcher(newCustomDocumentWalker);letdom=loadCustomDOM();letelement=matcher.querySelector(dom,'div a.btn:first-child');// one elementletelements=matcher.querySelectorAll(dom,'a.btn');// array of elementsletmatches=matcher.matches(element,'a.btn');// true

API

• querySelector: similar to Document.querySelector()
• querySelectorAll: similar to Document.querySelectorAll()
• matches: similar to Element.matches()

Supported selectors

• Type selector (div)
• Class selector (.btn)
• ID selector (#header)
• Attribute selectors ([attr], ...)
• Adjacent sibling selector (span + i)
• General sibling selector (span ~ i)
• Child selector (span > i)
• Descendant selector (span i)
• Empty (:empty)
• First child (:first-child)
• First of type (:first-of-type)
• Last child (:last-child)
• Last of type (:last-of-type)
• Not (:not())
• Before (::before)
• After (::after)