- Ext JS 3.0 Cookbook
- Jorge Ramon
- 324字
- 2021-04-01 13:43:43
Running high-performance DOM queries
Now you'll see how to run queries against the DOM using Ext JS—a must-have when you need to manipulate or perform actions on multiple, related DOM elements. The examples show how to reference all the div elements in a document, obtain all the elements with a CSS class name msg, and iterate over the options of a select element.
How to do it...
The following code snippets are examples of how to run high-performance queries against the DOM using Ext JS:
- When you need to retrieve the elements that match the div selector to find the div elements in the document, use the following code snippet:
Ext.onReady(function() { // Get all the div elements. var nodes = Ext.query('div'); Ext.each(nodes, function(item, index, allItems) { document.write(index + '<br/>'); }); }); - When you need to reference the elements with the class name
msg, use the following code snippet:var msgLinks = Ext.query('.msg'); Ext.each(msgLinks, function(item,index) { // Do something with the element here. }); - When you want to iterate over the options of a select element, use the following code snippet:
var select = Ext.get('countries-select'); Ext.each(select.options, function(item,index) { // Do something with the item here. });
The previous examples use Ext.query(path, [root]), a shorthand of Ext.DomQuery.select(path, [root]), to retrieve an array of DOM nodes that match a given selector.
DomQuery provides high-performance selector/XPath processing by compiling queries into reusable functions. It works on HTML and XML documents, supports most of the CSS3 selector's specification as well as some custom selectors and basic XPath, and allows you to plug new pseudo classes and matchers.
- The Retrieving DOM nodes and elements recipe, covered earlier in this chapter, shows how you can use Ext JS to get a handle on any DOM element.
- The Acquiring references to Ext JS components recipe, covered earlier in this chapter, explains how to acquire a reference to any component in your code.
- PS職場達人煉成記：人人都能學會的Photoshop辦公設計技巧
- 商用級AIGC繪畫創作與技巧（Midjourney+Stable Diffusion）
- CAXA CAD電子圖板2020工程制圖
- AutoCAD 2017實用教程
- Premiere Pro 2022從新手到高手
- 剪映：短視頻剪輯/字幕/動畫/AI從新手到高手（手機版+電腦版）
- 音樂日記：Logic Pro X場景x風格編曲實用教程
- 新編AutoCAD 2016從入門到精通
- 音樂制作7天速成：Cubase編曲教程
- CAD/CAM應用教程
- Photoshop CC新媒體圖形圖像設計與制作（全彩慕課版）
- Illustrator平面設計應用教程
- 剪輯師寶典：視頻剪輯思維與案例實戰
- Oracle 10g/11g Data and Database Management Utilities: LITE
- AutoCAD 2016中文版自學視頻教程（標準版）