Toolkit:node selection

From Surebert wiki

Contents

Node Selection Methods

Node selection in surebert is easy using the $ selector.

In browsers that include support for document.querySelectorAll (safari 3+, firefox 3.1+, IE8) surebert will leverage that making selections extremely fast, even though the selections without it are really fast too :)

The $ Selector

Returns either a reference to the node or a Toolkit:sb.NodeList collection. All nodes returned or singulary get all Element.prototypes defined appended as methods in browsers that do not natively support Element.prototype such as IE 6/7.

Usage Examples

ID Selector

An element id. When passed an element ID it returns a reference to the element with that id'

javascript code

$('#myForm')

Nodename Selector

e.g.'body' An tag name. When passed a tag name it returns an array of all the tags that match that tag name. If the tag is found in sb.singleTags e.g. body, head, title then only one element is returned instead of an array

javascript code

var body = $('body')
 
var nodeList = $('p');

Classname Selector

e.g. '.myClass' returns all nodes with the class 'myClass', see also [class="myClass"] below.

javascript code

var nodeList = $('.myClass');

It is infinitately faster to select elements by nodeName and className combo if all the nodes are of one nodeName type e.g. select all the P nodes of class .myClass

javascript code

var nodeList = $('p.myClass');

All nodes

You typically do not need to do this.

javascript code

var nodeList = $('*');

Descendant combinator

finds all the p tags that are decendents of #myDiv

javascript code

var nodeList = $('#myDiv p');

Child combinator

finds all the p tags that are direct decendents of #myDiv

javascript code

var nodeList = $('#myDiv > p');

Adjacent sibling combinator

finds all the B ndoes that are direct adjacent siblings of P nodes

javascript code

var nodeList = $('p + b');

General sibling combinator

a P node preceded by an DIV node

javascript code

var nodeList = $('div ~ p');

First child selector

finds all the P nodes that are the first child of their parent, be careful its not the first child of each P node

javascript code

var nodeList = $('p:first-child');

Last Child Selector

finds all the P nodes that are the last child of their parent

javascript code

var nodeList = $('p:last-child');

Empty Selector

finds all the P nodes that are empty

javascript code

var nodeList = $('p:empty');

Attribute Selectors

find all the INPUT nodes with the name 'choosen'

javascript code

var nodeList = $('input[name"choosen"]');

find all the A nodes that have the href http://www.surebert.com

javascript code

var nodeList = $('a[href="http://www.surebert.com"]');

find all the A nodes that end in google.com

javascript code

var nodeList = $('a[href$="google.com"]');

find all the A nodes that start with http

javascript code

var nodeList = $('a[href^="http"]');

find all the A nodes that have the substring

javascript code

var nodeList = $('a[href*="surebert"]');

find all the A nodes whose "hreflang" attribute has a hyphen-separated list of values beginning (from the left) with "en"

javascript code

var nodeList = $('a[hreflang|="en"]');

find all the P nodes whose "class" attribute value is a list of space-separated values, one of which is exactly equal to "bob"

javascript code

var nodeList = $('p[class~="bob"]');

Combining Selectors

Commas allow you to make multiple selections at once.This example returns all b nodes, all p nodes and node with the id 'wrapper'

javascript code

var nodeList = $('p, b, #wrapper');
Retrieved from "http://wiki.surebert.com/index.php/Toolkit:node_selection"