Ext JS 4.0.7 Sencha Docs

Ext.DomQuery

Files

Provides high performance selector/xpath processing by compiling queries into reusable functions. New pseudo classes and matchers can be plugged. It works on HTML and XML documents (if a content node is passed in).

DomQuery supports most of the CSS3 selectors spec, along with some custom selectors and basic XPath.

All selectors, attribute filters and pseudos below can be combined infinitely in any order. For example "div.foo:nth-child(odd)[@foo=bar].bar:first" would be a perfectly valid selector. Node filters are processed in the order in which they appear, which allows you to optimize your queries for your document structure.

Element Selectors:

  • * any element
  • E an element with the tag E
  • E F All descendent elements of E that have the tag F
  • E > F or E/F all direct children elements of E that have the tag F
  • E + F all elements with the tag F that are immediately preceded by an element with the tag E
  • E ~ F all elements with the tag F that are preceded by a sibling element with the tag E

Attribute Selectors:

The use of @ and quotes are optional. For example, div[@foo='bar'] is also a valid attribute selector.

  • E[foo] has an attribute "foo"
  • E[foo=bar] has an attribute "foo" that equals "bar"
  • E[foo^=bar] has an attribute "foo" that starts with "bar"
  • E[foo$=bar] has an attribute "foo" that ends with "bar"
  • E[foo*=bar] has an attribute "foo" that contains the substring "bar"
  • E[foo%=2] has an attribute "foo" that is evenly divisible by 2
  • E[foo!=bar] attribute "foo" does not equal "bar"

Pseudo Classes:

  • E:first-child E is the first child of its parent
  • E:last-child E is the last child of its parent
  • E:nth-child(n) E is the nth child of its parent (1 based as per the spec)
  • E:nth-child(odd) E is an odd child of its parent
  • E:nth-child(even) E is an even child of its parent
  • E:only-child E is the only child of its parent
  • E:checked E is an element that is has a checked attribute that is true (e.g. a radio or checkbox)
  • E:first the first E in the resultset
  • E:last the last E in the resultset
  • E:nth(n) the nth E in the resultset (1 based)
  • E:odd shortcut for :nth-child(odd)
  • E:even shortcut for :nth-child(even)
  • E:contains(foo) E's innerHTML contains the substring "foo"
  • E:nodeValue(foo) E contains a textNode with a nodeValue that equals "foo"
  • E:not(S) an E element that does not match simple selector S
  • E:has(S) an E element that has a descendent that matches simple selector S
  • E:next(S) an E element whose next sibling matches simple selector S
  • E:prev(S) an E element whose previous sibling matches simple selector S
  • E:any(S1|S2|S2) an E element which matches any of the simple selectors S1, S2 or S3//\

CSS Value Selectors:

  • E{display=none} css value "display" that equals "none"
  • E{display^=none} css value "display" that starts with "none"
  • E{display$=none} css value "display" that ends with "none"
  • E{display*=none} css value "display" that contains the substring "none"
  • E{display%=2} css value "display" that is evenly divisible by 2
  • E{display!=none} css value "display" that does not equal "none"

Available since: 1.1.0

Defined By

Properties

Collection of matching regular expressions and code snippets. ...

Collection of matching regular expressions and code snippets. Each capture group within () will be replace the {} in the select statement as specified by their index.

Defaults to: [{re: /^\.([\w-]+)/, select: 'n = byClassName(n, " {1} ");'}, {re: /^\:([\w-]+)(?:\(((?:[^\s>\/]*|.*?))\))?/, select: 'n = byPseudo(n, "{1}", "{2}");'}, {re: /^(?:([\[\{])(?:@)?([\w-]+)\s?(?:(=|.=)\s?['"]?(.*?)["']?)?[\]\}])/, select: 'n = byAttribute(n, "{2}", "{4}", "{3}", "{1}");'}, {re: /^#([\w-]+)/, select: 'n = byId(n, "{1}");'}, {re: /^@([\w-]+)/, select: 'return {firstChild:{nodeValue:attrValue(n, "{1}")}};'}]

Available since: 1.1.0

Collection of operator comparison functions. ...

Collection of operator comparison functions. The default operators are =, !=, ^=, $=, *=, %=, |= and ~=. New operators can be added as long as the match the format c= where c is any character other than space, > <.

Available since: 1.1.0

Object hash of "pseudo class" filter functions which are used when filtering selections. ...

Object hash of "pseudo class" filter functions which are used when filtering selections. Each function is passed two parameters:

  • c : Array An Array of DOM elements to filter.

  • v : String The argument (if any) supplied in the selector.

A filter function returns an Array of DOM elements which conform to the pseudo class. In addition to the provided pseudo classes listed above such as first-child and nth-child, developers may add additional, custom psuedo class filters to select elements according to application-specific requirements.

For example, to filter a elements to only return links to external resources:

Ext.DomQuery.pseudos.external = function(c, v){
    var r = [], ri = -1;
    for(var i = 0, ci; ci = c[i]; i++){
        // Include in result set only if it's a link to an external resource
        if(ci.hostname != location.hostname){
            r[++ri] = ci;
        }
    }
    return r;
};

Then external links could be gathered with the following statement:

var externalLinks = Ext.select("a:external");

Available since: 1.1.0

Defined By

Methods

Ext.DomQuery
view source
( selector, [type] ) : Function
Compiles a selector/xpath query into a reusable function. ...

Compiles a selector/xpath query into a reusable function. The returned function takes one parameter "root" (optional), which is the context node from where the query should start.

Available since: 1.1.0

Parameters

  • selector : String

    The selector/xpath query

  • type : String (optional)

    Either "select" (the default) or "simple" for a simple selector match

Returns

Ext.DomQuery
view source
( el, selector, nonMatches ) : HTMLElement[]
Filters an array of elements to only include matches of a simple selector (e.g. ...

Filters an array of elements to only include matches of a simple selector (e.g. div.some-class or span:first-child)

Available since: 1.1.0

Parameters

  • el : HTMLElement[]

    An array of elements to filter

  • selector : String

    The simple selector to test

  • nonMatches : Boolean

    If true, it returns the elements that DON'T match the selector instead of the ones that match

Returns

  • HTMLElement[]

    An Array of DOM elements which match the selector. If there are no matches, and empty Array is returned.

Ext.DomQuery
view source
( el, selector ) : Boolean
Returns true if the passed element(s) match the passed simple selector (e.g. ...

Returns true if the passed element(s) match the passed simple selector (e.g. div.some-class or span:first-child)

Available since: 1.1.0

Parameters

  • el : String/HTMLElement/HTMLElement[]

    An element id, element or array of elements

  • selector : String

    The simple selector to test

Returns

Ext.DomQuery
view source
( selector, [root] ) : HTMLElement[]
Selects an array of DOM nodes using JavaScript-only implementation. ...

Selects an array of DOM nodes using JavaScript-only implementation.

Use select to take advantage of browsers built-in support for CSS selectors.

Available since: 3.4.0

Parameters

  • selector : String

    The selector/xpath query (can be a comma separated list of selectors)

  • root : HTMLElement/String (optional)

    The start of the query (defaults to document).

Returns

  • HTMLElement[]

    An Array of DOM elements which match the selector. If there are no matches, and empty Array is returned.

Ext.DomQuery
view source
( path, [root] ) : HTMLElement[]
Selects an array of DOM nodes by CSS/XPath selector. ...

Selects an array of DOM nodes by CSS/XPath selector.

Uses document.querySelectorAll if browser supports that, otherwise falls back to jsSelect to do the work.

Aliased as Ext.query.

Available since: 1.1.0

Parameters

  • path : String

    The selector/xpath query

  • root : HTMLElement (optional)

    The start of the query (defaults to document).

Returns

  • HTMLElement[]

    An array of DOM elements (not a NodeList as returned by querySelectorAll). Empty array when no matches.

Ext.DomQuery
view source
( selector, [root] ) : HTMLElement
Selects a single element. ...

Selects a single element.

Available since: 1.1.0

Parameters

  • selector : String

    The selector/xpath query

  • root : HTMLElement (optional)

    The start of the query (defaults to document).

Returns

  • HTMLElement

    The DOM element which matched the selector.

Ext.DomQuery
view source
( selector, [root], [defaultValue] ) : Number
Selects the value of a node, parsing integers and floats. ...

Selects the value of a node, parsing integers and floats. Returns the defaultValue, or 0 if none is specified.

Available since: 1.1.0

Parameters

  • selector : String

    The selector/xpath query

  • root : HTMLElement (optional)

    The start of the query (defaults to document).

  • defaultValue : Number (optional)

    When specified, this is return as empty value.

Returns

Ext.DomQuery
view source
( selector, [root], [defaultValue] ) : String
Selects the value of a node, optionally replacing null with the defaultValue. ...

Selects the value of a node, optionally replacing null with the defaultValue.

Available since: 1.1.0

Parameters

  • selector : String

    The selector/xpath query

  • root : HTMLElement (optional)

    The start of the query (defaults to document).

  • defaultValue : String (optional)

    When specified, this is return as empty value.

Returns