Zach’s ugly mug (his face)

Zach Leatherman

Namespaces in Ext DomQuery

06 Mar 2007 Zach Leatherman


This article is old and may contain information that is outdated, irrelevant, or—dare I say it—no longer accurate. Read with care!

Do you want to use custom attributes in your XHTML? Do you use the YUI Library and Jack Slocum’s wonderful DomQuery selector engine?

If you want to select attribute nodes with a namespace in your XHTML, DomQuery does not support namespaces as an option to do so. But by adding a small snippet of code to DomQuery, we can make it do so.

As a standalone snippet executed after DomQuery is loaded.

Ext.DomQuery.matchers.push( {
  re: /^(?:([\[\{])(?:@)?([\w-]+(?:\:[\w-]+))\s?(?:(=|.=)\s?['"]?(.*?)["']?)?[\]\}])/,
  select: 'n = byAttribute(n, "{2}", "{4}", "{3}", "{1}");'
} );

OR by adding an array entry into the DomQuery code matchers array (paste after line 479 of the 17 January 2007 2:26:32 PM version)

  re: /^(?:([\[\{])(?:@)?([\w-]+(?:\:[\w-]+))\s?(?:(=|.=)\s?['"]?(.*?)["']?)?[\]\}])/,
  select: 'n = byAttribute(n, "{2}", "{4}", "{3}", "{1}");'

I did not modify the existing matcher for attribute selection because I didn’t want to modify the speed of the existing code for non-namespaced attributes. So by appending another entry to the end of the array, it’ll be used as a last resort if the other entries aren’t matched.

This approach relies on the assumption that when selecting an attribute with getAttribute, the browser interprets any namespace automatically: getAttribute(‘myNamespace:myAttributeName’), as documented by the peterned weblog. This was tested in Firefox 2 and IE 6.


Ext.query( '#test-data span[myNameSpace:myAttribute=myValue]' );

on the following DOM

<div id="test-data">
<span myNameSpace:myAttribute="myValue"></span>

Other notes regarding DomQuery:

To select a node with a non-empty attribute value:

Ext.query( '#test-data span[myNameSpace:myAttribute]' );