首页 > 其他分享> 文章详细

ExtJS DOM操作-查询（DOM Query）

2022-07-20 07:32:04 阅读：239 来源： 互联网

标签：DOM dom 元素 Element Ext Query ExtJS select

更新记录
2022年7月20日发布。
2022年7月6日从笔记迁移到博客。

ExtJS教程汇总：https://www.cnblogs.com/cqpanda/p/16328016.html

DOM操作-查询（DOM Query）

说明

DOM常用查询方法：get、query、select、fly

查询单个DOM元素-Ext.get()

Ext.get(id /HTML DOM) : Ext.dom.Element

说明：通过DOM元素的id属性，获得DOM元素
返回值：返回Ext.dom.Element类的实例
注意：Ext.get方法是Ext.dom.Element.get方法的快捷方法
注意：这是用来查询DOM的，不是查询组件的
注意：参数的id字符串不需要使用#开头
实例：

<input type="text" id="txtFirstName" />
// 获得DOM元素Ext.dom.Element object
var txtFirst = Ext.get("txtFirstName");
// 设置HTML属性
txtFirst.set({ 'value': 'Steve' });

查询单个DOM元素-Ext.fly()

Ext.fly (dom, [named] ) : Ext.dom.Element

说明：执行类似Ext.get()方法的功能，都是获得DOM元素
被设计成将DOM元素作为单个语句进行操作，并且不在内存中存储引用
而Ext.get存储DOM元素的引用，可以在其他地方继续使用
注意：第一个参数是dom元素或者dom元素的id
注意：如果没有匹配到dom元素则会，返回null
注意：Ext.fly()是Ext.dom.Element.fly()的快捷别名方法

实例：

<input type="text" id="txtLastName" /> 
// 获得DOM元素 并 设置HTML属性
Ext.fly('txtLastName').set({ 'value': 'Jobs' });

查询单个DOM元素-Ext.getDom (el )

Ext.getDom ( el ) : HTMLElement

注意：参数el可以是String/HTMLElement/Ext.dom.Element类型
说明：可以通过该函数实现将ExtJS DOM转为HTML DOM
实例：
//通过dom的id属性获得元素

var elDom = Ext.getDom('elId');
//通过dom节点获得dom节点
var elDom1 = Ext.getDom(elDom);

查询多个DOM元素-Ext.select()

Ext.select ( selector, composite ) : Ext.dom.CompositeElementLite/Ext.dom.CompositeElement

说明：通过CSS选择器、XPath查询方法（CSS/XPath selector）获得多个DOM元素
返回一个Ext.dom.CompositeElement类或 Ext.dom.CompositeElementLite类的实例
注意：返回类型是一个集合类型，可以进行遍历操作
注意：CompositeElement具有过滤、迭代和执行集合操作的方法
注意：Ext.Select()方法是Ext.dom.Element.select()方法的快捷别名方法
注意：这个方法和Ext.query方法类似，但是返回的类型不同

实例：
简单使用

var pandaSelect = Ext.select('#id1');

使用复杂的CSS选择器

Ext.select('div.row[title=bar]:first')

选中元素并设置宽度

Ext.select('div.row').setWidth(100);

选中多个元素

Ext.select('div.row, span.title');

设置搜索的根起点

Ext.select('div.row', true, 'myEl');

或者

Ext.get('myEl').select('div.row');

查询多个DOM元素-Ext.query()

说明：通过CSS选择器（CSS selector）语法选择多个DOM元素
Ext.query ( selector, [asDom] ) : HTMLElement[]/Ext.dom.Element[]
返回值：返回一个数组（HTMLElement[]/Ext.dom.Element[]）
如果没有查找到元素则返回空数组
注意：返回的是非ExtJS封装的DOM元素
注意：这里是CSS选择器，而不是ExtJS类似CSS语法
注意：还可以指定查询的DOM根节点
注意：Ext.query()方法是Ext.dom.Element.query()方法的快捷别名方法

实例：
使用简单的CSS选择器

<div class="panda1">1</div>
<div class="panda1">2</div>
<div class="panda1">3</div>

var panda =  Ext.query('.panda1');
console.log(panda);

设置查找的根节点（root）

//创建组件
var btn = Ext.create('Ext.button.Button',{
    text: 'PandaButton',
    renderTo: Ext.getBody()
});
//获得组件的DOM元素
var dom = btn.getEl().dom;
var queryResult = Ext.query('span.x-btn-inner',dom);

DOM操作-删除

移除DOM节点- Ext.removeNode()

Ext.removeNode ( node )

Ext.dom.Helper

说明：Ext.dom.Helper类用于创建DOM元素
使用特定的HTML属性，比如tag、子元素、class等创建DOM元素

以下是支持的属性：
属性描述
Tag HTML tag of the element to create
Children or cn an array of the same type of element definition of tags
Cls The class attribute of an element
Html innerHTML value of the element
Id The id of the element

实例：

Ext.dom.Helper.append('div1',{
    id: 'PandaId1',
    cls: 'PandaClass',
    html: '<h1>PandaH1</h1>'
});

Ext.dom.Query()

支持 CSS选择器和 XPath查询语法
返回类型：Ext.CompositeElementLite集合
注意：Ext.dom.Query是一个单例类型，不需要实例化

实例：

Ext.dom.Query.select('#main .menu ul li');

Ext.getElementById()

Ext.DomHelper

实例：创建DOM元素

var h1 = Ext.DomHelper.createDom({
    tag: "h1",
    html: "This is the title!"
});

Ext.getBody().appendChild(h1);

实例：创建DOM元素，并添加到body中

Ext.DomHelper.append(Ext.getBody(),{
    tag: "div",
    style: {
        width: "100px",
        height: "100px",
        border: "2px solid #333",
        margin : "20px auto"
    }
});

实例：创建多层级的DOM元素，添加到body中

Ext.DomHelper.append(Ext.getBody(),{
    tag: "div",
    style: {
        width: "100px",
        height: "100px",
        border: "2px solid #333",
        margin : "20px auto"
    },
    children : [{
        tag : "ul",
        children : [
            {tag: "li", html: "Item 1"},
            {tag: "li", html: "Item 2"}
        ]
    }]
});

标签：DOM,dom,元素,Element,Ext,Query,ExtJS,select
来源： https://www.cnblogs.com/cqpanda/p/16453553.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9