Use CSS selectors to match nodes in a custom object tree
npm install tree-selectorbuild a matching or query function for CSS selectors for any nested object structure!
``js
import { createQuerySelector, createMatches } from 'tree-selector';
const options = {
tag: n => n.tagName,
contents: n => n.innerText,
id: n => n.id,
class: n => n.className,
parent: n => n.parentElement,
children: n => n.childNodes,
attr: (n, attr) => n.getAttribute(attr)
};
const querySelector = createQuerySelector(options);
const matches = createMatches(options);
const selector = 'span.mySpan';
const element = document.getElementsByClassName('span')[0]
if(matches(selector, element)) {
// there are elements matching the selector
} else {
// no elements found
}
//Also possible, but less efficient
if(querySelector(selector, element).length > 0) {
// there are elements found
}
`
Configure tree-selector for the nested object structure you'll want to match against.
Configure a matches function for a node in your tree structure. (This is used internally by createQuerySelector)
#### options
options are an object of lookup functions for queried nodes. You only need to provide the configuration necessary for the selectors you're planning on creating.#id
(If you're not going to use lookups, there's no need to provide the id lookup in your options.)
* tag: Extract tag information from a node for div style selectors.contents
* : Extract text information from a node, for :contains(xxx) selectors.id
* : Extract id for #my_sweet_id selectors.class
* : .class_name
* : Used for sibling selectorschildren
* : Used to traverse from a parent to its children for sibling selectors div + span, a ~ p.attr
* : Used to extract attribute information, for [attr=thing] style selectors.
- :first-child
-
-
-
-
-
- [attr=value]: Exact match[attr]
- : Attribute exists and is not false-y.[attr$=value]
- : Attribute ends with value[attr^=value]
- : Attribute starts with value[attr*=value]
- : Attribute contains value[attr~=value]
- : Attribute, split by whitespace, contains value.[attr|=value]
- : Attribute, split by -`, contains value.