ExtJs之获取dom元素
来源:互联网 发布:中国2016年的gdp数据 编辑:程序博客网 时间:2024/05/16 02:32
需求
用ExtJs获取DOM元素,以附加事件等操作。
核心
ExtJs中会有三类基本对象 htmlelement , Ext.Element和CompositeElement 。分别解释一下:
htmlelement指html页面的各种标记元素,可以用document.getElementById()获得,具有html对象的方法和属性。
Ext.Element是最重要的EXT对象,在dom对象的基础上,又包装了很多方法和属性,可以用Ext.get()获取.
CompositeElement 是一组Ext.Element的集合对象。通过fist(),last(),item()等 获得Ext.Element对象,再Ext.select()选择多个对象时返回的就是这种对象
1.HTMLElement
用javascript获得htmlelement的基本方法是:document.getElementById()
2.EXT.Element
EXT.get()获得EXT.Element对象,入参可以是id或HTMLElement,也就是通过EXT.get()可以把htmlelement包装成EXT.Element对象。
另外,EXT.Element对象的dom属性也可以得到其对应的HTMLElement对象。
3.EXT.select()
EXT.select()根据标记名称或classname或通配符获取对应的HtmlElement,或者是EXT.Element
EXT.select("div");//选择所有divEXT.select(".red");//选择所有classname为red的所有元素EXT.select("div.red")选择所有classname为red的div元素EXT.select("*");选择所有元素。EXT.select("#id");按id选择元素。
4.EXT.query()
EXT.query()是EXT.DomQuery.select()的简写.返回htmlelement数组。
var a=EXT.query("div");alert(a[0].innerHTML);
5.EXT.getBody()
将body标记作为EXT.Element返回
6.EXT.getDoc()
将 HTML作为EXT.Element返回。
7. 有关select 和 query中的selector有四种形式的定义:
1.元素选择符: Ext.query("span"); Ext.query("span", "foo"); Ext.query("#foo"); Ext.query(".foo"); Ext.query("*"); Ext.query("div p"); 2.属性选择符: Ext.query("*[class]"); Ext.query("*[class=bar]"); Ext.query("*[class!=bar]"); Ext.query("*[class^=b]"); Ext.query("*[class$=r]"); Ext.query("*[class*=a]"); 3.CSS值元素选择符: Ext.query("*{color=red}"); Ext.query("*{color=red} *{color=pink}"); Ext.query("*{color!=red}"); Ext.query("*{color^=yel}"); Ext.query("*{color$=ow}"); Ext.query("*{color*=ow}"); 4.伪类选择符: Ext.query("span:first-child"); Ext.query("a:last-child"); Ext.query("span:nth-child(2)"); Ext.query("input:checked"); Ext.query("div:contains(within)"); Ext.query("div:not(form)"); Ext.query("td:next(td)"); Ext.query("label:prev(input)");
Ext中有几个以get开头的方法,这些方法可以用来得到文档中DOM、得到当前文档中的组件、得到Ext元素等,在使用中要注意区别使用。
1、get方法
get方法用来得到一个Ext元素,也就是类型为Ext.Element的对象,Ext.Element类是Ext对DOM的封装,代表DOM的元素,可以为每一个DOM创建一个对应的Element对象,可以通过Element对象上的方法来实现对DOM指定的操作,比如用hide方法可以隐藏元素、initDD方法可以让指定的DOM具有拖放特性等。get方法其实是Ext.Element.get的简写形式。
get方法中只有一个参数,这个参数是混合参数,可以是DOM节点的id、也可以是一个Element、或者是一个DOM节点对象等。看下面的示例代码:
Ext.onReady(function(){ var e=new Ext.Element("hello"); alert(Ext.get("hello")); alert(Ext.get(document.getElementById("hello"))); alert(Ext.get(e)); });
2、getCmp方法用来获得Ext组件。
getCmp方法用来获得一个Ext组件,也就是一个已经在页面中初始化了的Component或其子类的对象,getCmp方法其实是Ext.ComponentMgr.get方法的简写形式。
getCmp方法中只有一个参数,也就是组件的id。看下面的代码:
Ext.onReady(function(){ var h=new Ext.Panel({ id:"h2", title:" ", renderTo:"hello", width:300, height:200 }); Ext.getCmp("h2").setTitle("新的标题"); });
3、getDom方法-获得DOM节点
getDom方法能够得到文档中的DOM节点,该方法中包含一个参数,该参数可以是DOM节点的id、DOM节点对象或DOM节点对应的Ext元素(Element)等。比如下面的代码:
Ext.onReady(function(){ var e=new Ext.Element("hello"); Ext.getDom("hello"); Ext.getDom(e); Ext.getDom(e.dom); });
- ExtJs之获取dom元素
- ExtJS DOM元素操作
- ExtJs 获取Dom对象
- ExtJs 获取Dom对象
- EXTjs获取元素
- ExtJS:获取Ext元素
- DOM之获取元素,获取和设置属性
- dom元素的获取
- DOM获取元素大小
- dom元素获取
- DOM元素尺寸获取
- Jsoup获取DOM元素
- 获取DOM元素样式
- JavaScript获取DOM元素
- 获取Dom元素方式
- DOM元素的获取
- ExtJS 操作DOM元素Ext.Element
- javascript获取Dom节点元素
- 怎么使用命令将本地项目上传到GitHub
- XAMPP PHP配置 Xdebug
- 【笔记】多线程调试
- 测试开发面试真题
- PostgreSQL中客户端连接到服务器端之后产生的进程情况
- ExtJs之获取dom元素
- 小米笔试题 依据父子关系建树
- 6.12 正整数和
- 多重背包二进制分解思想讲解
- 500 Internal Server Error
- MySQL DELIMITER
- Spring Boot 日期数据格式转换@JsonFormat实例
- hdu 3466 (01背包+思维排序)
- [RCA][2017-11-27] 新模块开发页面混乱