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

t('#table7 tr:odd') collects every second row of #table7.

:even

t('#table7 tr:even') returns every other second row.

:empty

t('li:empty') will sum up all list-nodes without content.

:first-child

t('li:first-child') selects every list-node that is first in its parent list.

:last-child

t('li:last-child') returns the last list-node of any list.

:only-child

t('li:only-child') will search all list-nodes that are all alone in their list (which would be a bit stupid, because it is not very semantic to list up only one item).

:nth-child

t('li:nth-child(2)') collects the second li in any list.

:not

Not inverses any simple selectors (due to limitations in the selector engine, any selectors with brackets will probably fail).

t('object:not(:empty)') will return all object tags that have any tag content.

:has

Has allows to select nodes based on their children (same limitations apply).

t('table:has(thead)') only returns table that have a thead-Tag inside them.

:contains

Contains selects Nodes based on their textual content (no brackets again).

t('span:contains(tinyjs)') selects those spans with "tinyjs" in their text.

:lang

t('html:lang(en)') probably explains itself (otherwise just ask).