- 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.
- 剪映短視頻剪輯零基礎一本通
- Photoshop圖形圖像設計案例教程（高等院校計算機任務驅動教改教材）
- 中文版3ds Max 2024完全自學教程
- Midjourney AI案例實戰：繪本+動漫+插畫
- Instant Testing with QUnit
- ICEfaces 1.8: Next Generation Enterprise Web Development
- Excel 2010 Financials Cookbook
- 24小時學會Word-Excel-PowerPoint 2010三合一
- Procreate數字繪畫實戰教程（全彩微課版）
- Pluggable Authentication Modules: The Definitive Guide to PAM for Linux SysAdmins and C Developers
- Python Geospatial Development
- Drupal 6 Site Builder Solutions
- 攝影師的后期課：Photoshop基礎入門篇
- jQuery 1.4 Reference Guide
- Mahara 1.4 Cookbook