Ext JS Learning 12th Day EXT Base operation Dom; Get and Fly method

This article is used to record learning notes

Well First, what is the DOM (Document Object model) –W3C definition of the DOM: the documentation objects models are a platform, a language-neutral application programming Interface (API) that allows programs to access and change the content, structure, and style of a document. -in fact, Dom is a generic model, not only in our HTML, but also in other files exist, I believe you are most familiar with the XML bar, in fact, there are many ... the development of –dom is also very long, the version continues, resulting in 0 levels of DOM, 1-level DOM, Level 2 DOM and the latest Level 3 dom, the relative maturity is from the 2-level DOM. Every version of the update has a very practical change.

Node nodes, for NodeType, NodeName, NodeValue, GetAttribute, and so on some of the definition of dot you will not be unfamiliar

• For DOM model operation, I believe a familiar and lovely name you must know: dom visit –document.getelementbyid, document.getElementsByTagName, Document.getelementsbyname, InnerHTML, innertext and some other ways to access the DOM element Dom Crud–createelement, ParentNode, ChildNodes, AppendChild, RemoveChild, ReplaceChild, Inertbefore, FirstChild, previoussibling and so on a series of ways to manipulate the DOM • For DOM Styles – I also believe you know very well, Just add a style attribute to the node, we can manipulate the style of the node, or trigger the event to change the style, or manipulate the DOM according to the requirements of different animation effects, etc., this is inseparable from the style property. • Well, for the old-fashioned dom we put aside for the moment, so the appearance of ext, so that these for the DOM concept becomes simple and practical. Ext's Dom–ext uses three core tool classes to perfectly encapsulate the DOM we know, OK, remember their name: –ext.element (almost everything in DOM has been completely encapsulated) – Ext.domhelper (Well, he's a powerful tool for manipulating UI interfaces) –ext.domquery (for DOM node queries) Ext.element Common methods: • If you are deeply obsessed with Ext, Then you must know ext.element this class, 4.x version because of the bottom of the refactoring, so I see a more concise and clear code, that is, this JS file: Abstractelement.js, he has two top-of-the-line function, let developers sigh again the power of ext bottom. They are ext.get and ext.fly. Well! Please remember their names!! One approach uses a caching mechanism to improve the efficiency of getting DOM nodes, while the other uses JavaScript's classic ' enjoy meta ' mode to improve efficiency, saving memory and making it less carbonized. –ext.get (Ext.Element.get) –ext.fly (Ext.Element.fly) –ext.getdom Gets the summary of the elements: –ext.get consumes more memory and avoids using it as much as possible. Although the –ext.fly is more memory-saving, it can only be used once. –ext.getdom is ideal for directly fetching page elements and returning DOM elements if you want to manipulate DOM metaThis is the best way to do it.

Ext.onready (function(){    //Ext.dom.Element    //Ext.get uses a caching mechanism to improve the efficiency of getting DOM nodes Ext.element        //description of the Get method:    /** 1 First go to Ext.cache cache to find, if there is a cache, directly return * 2 if the cache is not, then go to the page to find, if not in the page, return NULL * 3 If the page contains, add the current content to the cache: { ID: {data/events/dom}} * 4 Ext.addcacheentry Add to cache method*/    varD1 = ext.get (' D1 ');//ext.elementalert (D1.dom.innerHTML); //Ext.fly    /** Fly: Use JavaScript classic ' enjoy meta mode ' to improve efficiency, saving memory, Lower Carbonization * returned object: Fly object, of course, you can understand that the return is the EXT package ext.element Object * Note: F Ly due to the internal use of the enjoy meta mode, so only suitable for one operation, thereby saving memory*/          varD2 = Ext.fly (' D2 ')); D2.dom.innerHTML= ' AAA '; varD3 = Ext.fly (' D3 ')); D3.dom.innerHTML= ' BBB '; //Ext.getdom    /** * Get the DOM element of the element directly from the page*/    varDom = Ext.getdom (' D3 ');//HtmlElementDom.innerhtml= "CCCC"; });

Ext JS Learning 12th Day EXT Base operation Dom; Get and Fly method