Selectors

tiny.js features full CSS2.1 selectors - and the irregular parent(s) selectors "<" and "<<". Multiple selectors in one selection as well as multiple selections, splitted with ",", are possible.

The Selector function t works like this:

t(selection, base, returnAsArray)

• selection: String containing a valid CSS2.1 selector
• base: node(s) on which the selection is based
• returnAsArray: if set, the result will be a simple array without Methods

The selector filters are stored in the object t.cf and therefore are easily extendable with Plugins.

Basic Selectors

The Selector engine has a small optimization regarding basic selectors that can be covered with the DOM-getElement-Methods.

tag Selector

t('body') will select every Node with the given tagname, e.g. 'body' or even '*'.

.class Selector

t('.text') selects all Nodes with the className 'text'.

#id Selector

t('#header') returns the Node with the id 'header'.

name Selector

t('[name=password]') scrounges the document for all Nodes with the name 'password'.

DOM Traversing

Traversing shorthands like ~, +, > are also implemented, but less optimized.

All selector ("*")

t('*') selects all nodes insode the current selected nodes (or inside document, if no base given).

Direct Children (">")

t('body > div') returns all div-Nodes which are direct childNodes of the body-Tag.

Siblings ("~")

t('a ~ span') will collect all spans that are siblings to an a-Tag.

Next ("+")

t('a + b') will only return b-Tags with an a-Tag as the previous Node.

Parent ("<")

This selector is not a valid CSS2.1-Selector, but I sure wish it was, because it is so practical.

t('<', node) returns the first parent of the given node.

Parents ("<<")

Another Nonstandard-Selector. Same as before, but doesn't stop until it hits document.

Attributes

Present [key]

t('[title]') will collect all nodes with any truthy title attribute.

Equal [key=value]

t('[value=1]') returns a selection of all nodes with their value attribute set to "1".

Not Equal [key!=value]

t('[placeholder!=Searchterm]') selects all nodes with a placeholder attribute other than "Searchterm".

Starts With [key^=value]

t('[value^=49]') will find all nodes with a value attribute starting with "49".

Ends With [key$=value]

t('[value$=test]') yields all nodes with a value ending on "test".

Partly Equal [key*=value]

t('[placeholder*=mobile]') searches all nodes that have "mobile" somewhere in their value.

Separate Part Equal [key~=value]

t('[value~=javascript]') should return all nodes that have "javascript" as a delimited subpart in their value Attribute (e.g. for tagging).

Subpart before "-" Equal [key|=value]

t('[lang|=en]') selects all nodes with their lang attribute set to any english dialect.

Pseudo Attributes

:odd

:even

:empty

:first-child

:last-child

:only-child

:nth-child

:not

:has

:contains

:lang