Tutorial:DomQuery v1.1 Advanced
From Learn About the Ext JavaScript Library
| Summary: DomQuery Advanced |
| Author: Bernard Chhun |
| Published: september 13th 2007 |
| Ext Version: 1.1 |
Languages:  English |
This tutorial will drive you through some advanced DOM manipulation using the results we may get when we use DomQuery.
DomQuery Advanced
Highlight my DOM damn it!
here's an homage clone to what Karl Swedberg did for the JQuery Manual.
It basically highlights some DOM elements based on what button we clicked on. The Ext code is already in the page and you guys will need to give it the appropriate Ext JS files.
Known bugs
the 2nd selector doesn't select all even LI'sthe 8th selector dies on an error
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Tutorials - DomQuery</title> <script type="text/javascript" src="../js/firebug/firebug.js"></script>
<style>
.yellow{background-color:yellow;}
.yellow
</style> </head> <body id="body"> <script type="text/javascript" src="../ext/ext-base.js"></script> <script type="text/javascript" src="../ext/ext-core.js"></script> <script> var domquery = function(){ return{ init: function(){
Ext.select("div.dom-traversal-toggles").on("click", function(e, el){ var id = el.id; id = id.replace("dt-link", ""); if (id != ""){ var toggler = function(e){ var highlight = function(els){ for (var x = 0 ; x < els.length; x ++){ var el = Ext.get(els[x]); if (el) { if (el.hasClass("yellow")) { el.removeClass("yellow"); }else{ el.addClass("yellow");
} } } return els; }; var highlightHidden = function(els){ var elmts = highlight(els); for (var x = 0 ; x < elmts.length; x ++){ var el = Ext.get(elmts[x]); if (el) { if (el.hasClass("yellow")){ el.fadeIn(); }else{ el.fadeOut(); el.removeClass("yellow"); } } } } switch(e){ case "1": highlight(Ext.query('li:first', "extdt")); break; case "2": highlight(Ext.query('li:even', "extdt")); break; case "3": highlight(Ext.query('li', "extdt").splice(0,3)); break; case "4": highlight(Ext.query('li:not(.goofy)', "extdt")); break; case "5": highlight(Ext.query('p a[href*=#]', "extdt")); break; case "6": highlight(Ext.query('code, li.goofy', "extdt")); break; case "7": highlight(Ext.query('ul .goofy > strong', "extdt")); break; case "8": highlight(Ext.query('li+li>a[href$=pdf]', "extdt")); break; case "9": if (Ext.query("span{display=none}", "extdt").length > 0) { highlightHidden( Ext.query("span{display=none}", "extdt") ); }else { highlightHidden( Ext.query("span{display}", "extdt")); } break; case "10": highlight( Ext.query("li:nth(4)", "extdt") ); break; } }(id); } if (e == "x"){ } } ); } } }(); Ext.onReady( function(){ domquery.init(); } ); </script> <div style="border: 1px solid rgb(0, 0, 0); padding: 1em; 400px;" id="extdt"> <p class="goofy"> This is a <em>paragraph</em> of <strong>text</strong> with class=”goofy.” It has an <a title="http://www.englishrules.com" class="external text" href="http://www.englishrules.com">external link</a>, some <code>$(code)</code>, and a <a title="" href="#dt-link3_same-page_link">#dt-link3 same-page link</a>. </p> <ul> <li>list item 1 with dummy link to <a title="Silly.pdf" class="new" href="/action/edit/Silly.pdf">silly.pdf</a> </li> <li class="goofy"> <em>list <strong>item</strong> 2</em> with class=”<strong>goofy</strong>“ </li> <li >list item 3 <span style="display:none;"> SURPRISE!</span> </li> <li> <strong>list item 4</strong> with silly link to <a title="Silly.pdf silly.pdf" class="new" href="/action/edit/Silly.pdf_silly.pdf">silly.pdf silly.pdf</a> </li> </ul> </div> <div class="dom-traversal-toggles"> <ul> <li><input type="submit" value="toggle" id="dt-link1" /> <code>Ext.query('li:first')</code> gets the first list item</li> <li><input type="submit" value="toggle" id="dt-link2" /> <code>Ext.query('li:even')</code> gets all odd-numbered list items (because, in javascript, numbering starts with 0, not 1).</li> <li><input type="submit" value="toggle" id="dt-link3"/> <code>Ext.query('li').splice(0,3)</code> gets the first 3 list items. “lt” stands for “less than,” and it starts counting at 0, not 1. </li> <li><input type="submit" value="toggle" id="dt-link4"/> <code>Ext.query('li:not(.goofy)')</code> gets list items 1, 2, and 4, because they’re not “goofy.”</li> <li><input type="submit" value="toggle" id="dt-link5"/> <code>Ext.query('p a[href*=#]')</code> gets any links that are inside a paragraph and have an “href” attribute containing “#” anywhere.</li> <li><input type="submit" value="toggle" id="dt-link6"/> <code>Ext.query('code, li.goofy')</code> gets all code elements <em>and</em> any list item with a class of “goofy.”</li> <li><input type="submit" value="toggle" id="dt-link7"/> <code>Ext.query('ul .goofy > strong')</code> gets all strong elements that are children of any element with a class of “goofy” as long as the class somewhere inside (i.e. a descendent) of an ordered list. Notice that the word “item” is not highlighted because, even though it’s inside “.goofy,” it’s not a direct child. Only “goofy” is a direct child of “.goofy.” Maybe we should call it “goofy jr.” </li> <li><input type="submit" value="toggle" id="dt-link8"/> <code>Ext.query('li + li > a[@href$=pdf]')</code> gets all links ending in “pdf” that are children of any list item that has another list item as its previous sibling. It won’t get the first list item’s silly.pdf because that list item has no other list items before it.</li> <li><input type="submit" value="toggle" id="dt-link9"/> <code>Ext.query("span{display=none}")</code> gets any span element that is hidden.</li> <li><input type="submit" value="toggle" id="dt-link10"/> <code>Ext.query("li:nth(4)")</code> gets the 4th li element</li> </ul> </div> </body></html>