Info

Helpers to make imediate use of querySelector and querySelectorAll

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div class="level1">
    <div class="level2">
        <div class="level3">
            <div class="level4">
                <div class="level5" id="foo">
                </div>
                <div class="level5">
                </div>
                <div class="level5">
                </div>
            </div>
        </div>
    </div>
</div>
<script>
  if (document.querySelector && document.querySelectorAll) {
   window.$one = function(query, context) {
    return $((context || document).querySelector(query));
   };
  
   window.$all = function(query, context) {
    return $((context || document).querySelectorAll(query));
   };
  }
  else {
   window.$one = function(query, context) {
    return $(query, context);
   };
   window.$all = window.$one;
  }
</script>

Preparation code output

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

$('.level1 .level2 .level3 .level4 #foo');

$one('.level1 .level2 .level3 .level4 #foo');

$('.level1 .level2 .level3 .level4 .level5');

$all('.level1 .level2 .level3 .level4 .level5');

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

• Revision 1: published by Diogo Baeder on 4th August 2010

0 comments