Navigating the DOM with ExtJS By Aaron Conran
Document Object Model <ul><li>The Document Object Model or DOM is a standard to represent HTML, XHTML and other XML format...
DOM Nodes <ul><li>DOM Nodes can be of various types </li></ul><ul><li>The type of node can be determined by a property cal...
DOM Pointers <ul><li>Each dom node has 5 pointers which allow you to navigate through the DOM </li></ul><ul><ul><li>parent...
DOM Pointers <ul><li>Finding related elements with only DOM pointers may prove frustrating  </li></ul><ul><li>ExtJS allows...
Retrieving an HTMLElement <ul><li>With standard JavaScript we would retrieve an HTMLElement by: </li></ul><ul><li>var myEl...
Ext.Element <ul><li>Ext.Element is a wrapper class around HTMLElement which provides functionality for manipulating, creat...
Getting an Element <ul><li>To retrieve an Ext.Element: </li></ul><ul><ul><li>var myEl = Ext.get(‘myID’); </li></ul></ul><u...
Searching for  Related Elements <ul><li>Given the following markup: </li></ul><ul><li><fieldset> </li></ul><ul><li><legend...
up or findParentNode <ul><li>up </li></ul><ul><li>public function up( String selector, [Number/String/HTMLElement/Element ...
CSS/Xpath Selectors <ul><li>ExtJS supports most CSS3 Selectors and Xpath </li></ul><ul><li>Examples </li></ul><ul><ul><li>...
Methods for Searching  the DOM <ul><li>child </li></ul><ul><li>contains </li></ul><ul><li>down </li></ul><ul><li>findParen...
Upcoming SlideShare
Loading in …5
×

Ext Js Dom Navigation

26,143 views

Published on

sdhjl2000@gmail.com

Published in: Technology
0 Comments
17 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
26,143
On SlideShare
0
From Embeds
0
Number of Embeds
678
Actions
Shares
0
Downloads
350
Comments
0
Likes
17
Embeds 0
No embeds

No notes for slide

Ext Js Dom Navigation

  1. 1. Navigating the DOM with ExtJS By Aaron Conran
  2. 2. Document Object Model <ul><li>The Document Object Model or DOM is a standard to represent HTML, XHTML and other XML formats. </li></ul><ul><li>The DOM is represented as a tree within the browser and provides access to all node’s on the current page </li></ul>
  3. 3. DOM Nodes <ul><li>DOM Nodes can be of various types </li></ul><ul><li>The type of node can be determined by a property called nodeType </li></ul><ul><li>The most frequently used nodeType ’s are: </li></ul><ul><ul><li>document.ELEMENT_NODE (1) </li></ul></ul><ul><ul><li>document.TEXT_NODE (3) </li></ul></ul><ul><ul><li>document.DOCUMENT_NODE (9) </li></ul></ul>From here on we will refer to DOM node’s with a nodeType of ELEMENT_NODE as an HTMLElement.
  4. 4. DOM Pointers <ul><li>Each dom node has 5 pointers which allow you to navigate through the DOM </li></ul><ul><ul><li>parentNode </li></ul></ul><ul><ul><li>previousSibling </li></ul></ul><ul><ul><li>nextSibling </li></ul></ul><ul><ul><li>firstChild </li></ul></ul><ul><ul><li>lastChild </li></ul></ul>These pointers will return null if there is no associated dom node
  5. 5. DOM Pointers <ul><li>Finding related elements with only DOM pointers may prove frustrating </li></ul><ul><li>ExtJS allows you to find related elements much easier by </li></ul><ul><ul><li>eliminating cross-browser inconsistencies </li></ul></ul><ul><ul><li>ignoring empty textnodes created by formatted markup </li></ul></ul><ul><ul><li>implementing CSS/XPath selection </li></ul></ul>
  6. 6. Retrieving an HTMLElement <ul><li>With standard JavaScript we would retrieve an HTMLElement by: </li></ul><ul><li>var myEl = document.getElementById(‘myID’); </li></ul><ul><li>With Ext we can retrieve the same HTMLElement by: </li></ul><ul><li>var myEl = Ext.getDom(‘myID’); </li></ul>
  7. 7. Ext.Element <ul><li>Ext.Element is a wrapper class around HTMLElement which provides functionality for manipulating, creating and finding other Elements </li></ul><ul><li>Ext.Element maintains cross-browser compatibility </li></ul><ul><li>Ext.Element has an HTMLElement property named dom </li></ul><ul><ul><li>‘ has’ signifying that Ext.Element uses aggregation rather than inheritance </li></ul></ul>
  8. 8. Getting an Element <ul><li>To retrieve an Ext.Element: </li></ul><ul><ul><li>var myEl = Ext.get(‘myID’); </li></ul></ul><ul><li>To directly access the HTMLElement of myEl use the dom property: </li></ul><ul><li>myEl. dom .innerHTML </li></ul>
  9. 9. Searching for Related Elements <ul><li>Given the following markup: </li></ul><ul><li><fieldset> </li></ul><ul><li><legend>Email</legend> </li></ul><ul><li><div> </li></ul><ul><li><input type=&quot;text&quot; name=&quot;email&quot; id=&quot;email&quot; /> </li></ul><ul><li></div> </li></ul><ul><li></fieldset> </li></ul><ul><li>Task: Find the fieldset element with only a reference to the ‘email’ element. </li></ul><ul><li>Code: </li></ul><ul><li>var el = Ext.get(‘email’). up (‘fieldset’); </li></ul>CSS Selector Input’s ID
  10. 10. up or findParentNode <ul><li>up </li></ul><ul><li>public function up( String selector, [Number/String/HTMLElement/Element maxDepth] ) </li></ul><ul><li>Walks up the dom looking for a parent node that matches the passed simple selector (e.g. div.some-class or span:first-child). This is a shortcut for findParentNode() that always returns an Ext.Element. </li></ul><ul><li>Parameters: </li></ul><ul><ul><li>selector : StringThe simple selector to test </li></ul></ul><ul><ul><li>maxDepth : Number/String/HTMLElement/Element(optional) The max depth to search as a number or element (defaults to 10 || document.body) </li></ul></ul><ul><li>Returns: </li></ul><ul><ul><li>Ext.Element The matching DOM node (or null if no match was found) </li></ul></ul><ul><li>This method is defined by Element. </li></ul>
  11. 11. CSS/Xpath Selectors <ul><li>ExtJS supports most CSS3 Selectors and Xpath </li></ul><ul><li>Examples </li></ul><ul><ul><li>div.myClass </li></ul></ul><ul><ul><li>body </li></ul></ul><ul><ul><li>a.window </li></ul></ul><ul><ul><li>Div:only-child </li></ul></ul><ul><ul><li>div:last-child </li></ul></ul><ul><ul><li>div > div </li></ul></ul>
  12. 12. Methods for Searching the DOM <ul><li>child </li></ul><ul><li>contains </li></ul><ul><li>down </li></ul><ul><li>findParent </li></ul><ul><li>findParentNode (or up) </li></ul><ul><li>getNextSibling </li></ul><ul><li>getPrevSibling </li></ul><ul><li>is </li></ul><ul><li>query </li></ul><ul><li>select </li></ul><ul><li>up </li></ul>

×