mozilla
Your Search Results

    QuerySelector

     

    Along the lines of other frameworks such as jQuery or Prototype, shortening the "querySelector" name can be convenient:

    function $ (selector, el) {
         if (!el) {el = document;}
         return el.querySelector(selector);
    }
    function $$ (selector, el) {
         if (!el) {el = document;}
         return el.querySelectorAll(selector);
         // Note: the returned object is a NodeList.
         // If you'd like to convert it to a Array for convenience, use this instead:
         // return Array.prototype.slice.call(el.querySelectorAll(selector));
    }
    alert($('#myID').id);
    

    (Note that while using the Firefox Web Console, the above functions are available automatically.)

    Both XUL and even XML can be easily made supportable (an alternative approach to the following would be to add ChromeWindow.prototype or Window.prototype, accessing this.document.querySelector, or following the jQuery style of chaining by returning 'this' within each prototype method of $()):

    HTMLDocument.prototype.$ = function (selector) { // Only for HTML
        return this.querySelector(selector);
    };
    
    Example:
    
    <h1>Test!</h1>
    <script>
    HTMLDocument.prototype.$ = function (selector) {
        return this.querySelector(selector); 
    }; 
    alert(document.$('h1')); // [object HTMLHeadingElement]
    </script>
    
    XULDocument.prototype.$ = function (selector) { // Only for XUL
        return this.querySelector(selector);
    };
    
    Example:
    
    <label value="Test!"/>
    <script type="text/javascript"><![CDATA[
    XULDocument.prototype.$ = function (selector) { // Only for XUL
        return this.querySelector(selector);
    };
    
    alert(document.$('label')); // [object XULElement]
    ]]></script>
    
    Document.prototype.$ = function (selector) { // Only for plain XML
        return this.querySelector(selector);
    };
    var foo = document.implementation.createDocument('someNS', 'foo', null); // Create an XML document <foo xmlns="someNS"/>
    var bar = foo.createElementNS('someNS', 'bar'); // add <bar xmlns="someNS"/>
    foo.documentElement.appendChild(bar);
    alert(foo.$('bar').nodeName); // gives 'bar'
    
    Element.prototype.$ = function (selector) { // Works for HTML, XUL, and plain XML
        return this.querySelector(selector);
    };
    
    HTML example:
    <h1><a>Test!<a/></h1>
    <script>
    Element.prototype.$ = function (selector) {
        return this.querySelector(selector); 
    };
    alert(document.getElementsByTagName('h1')[0].$('a').nodeName); // 'A'
    
    XUL example:
    <hbox><vbox/></hbox>
    <script type="text/javascript"><![CDATA[
    Element.prototype.$ = function (selector) {
        return this.querySelector(selector); 
    };
    var XULNS = 'http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul';
    alert(document.getElementsByTagNameNS(XULNS, 'hbox')[0].$('vbox').nodeName); // vbox
    ]]></script>
    
    XML example:
    <foo xmlns="someNS"><bar/></foo> in document earlier
    var foo = document.getElementsByTagNameNS('someNS', 'foo')[0];
    alert(foo.$('bar'));
    
    

    Note that for plain XML, the # 'id' selector will not work with an 'id' attribute (since a such-named attribute need not necessarily be of type ID in XML, though it is in HTML and XUL), nor will it work with xml:id.

    However, it will work with attribute selectors that target non-prefixed attributes (such as 'id', but not xml:id: http://www.w3.org/TR/selectors-api/#resolving) (even though CSS3 does support namespaced attribute selectors: http://www.w3.org/TR/css3-selectors/#attrnmsp and potentially xml:id as #: http://www.w3.org/TR/css3-selectors/#id-selectors ).

    Document Tags and Contributors

    Contributors to this page: wbamberg
    Last updated by: wbamberg,