简化Dom操作,Ext Js为Dom提供简化操作,这些简化操作用于获取Html页面的Dom元素,并可以动态的修改Dom元素
1.Ext.get,Ext.getXxx和Ext.fly方法
Ext.get(String/HtmlElement/Ext.dom.Element,Element el):根据传入的Html元素Id,html元素本身
除此之外,Ext还提供一系列getXxx()方法,用于获取Html页面指定的特定元素,方法如下
getDoc:返回该Html页面本身包装成的Ext.dom.Element对象
getHead():返回Html页面的<head../>元素对应的Ext.dom.Element对象
getBody():返回Html页面的<body../>元素对应的Ext.dom.Element对象
举个例子:
<script>
Ext.onReady(function()
{
//根据id获取Ext.dom.Element对象
Ext.get("mydiv")
.setWidth(200)
.setHeight(80)
.setStyle("border","1px solid black");
});
//获取页面的body元素
Ext.getBody()
.setStyle("background","#afa");
</script>
说明:一般采用Ext.fly("mydiv")效果更好
2.Ext.query,Ext.select方法与Ext.dom.Query工具类
Ext.query(),Ext.select()都是批量获取dom,两者作用是相同的,都是根据CSS选择器找出一个或者多个元素,区别在与他们返回值不一样,Ext.query()获取的是数组类型,而Ext.select()返回的是Ext.dom.CompositeElementLite对象
<body>
<div id="mydiv"></div>
<div id="mydiv"></div>
<div id="mydiv"></div>
</body>
<script>
Ext.onReady(function()
{
//获取页面的div元素,返回一个数组
var divs=Ext.query("div");
//遍历
Ext.each(divs,function(div,index,myself)
{
//依次修改每个div元素内容
div.innerHTML="第"+index+"个元素";
div.style.border="2px solid black";
div.style.width="240px";
div.style.height="80px";
div.style.backgroundColor="rgb("+(index*80)+",255,"+(index*80)+")";
});
});
</script>
如果使用Ext.select()方法,则面向Ext.dom.ComPositeElementLine编程,从而简化程序
<body>
<div id="mydiv"></div>
<div id="mydiv"></div>
<div id="mydiv"></div>
</body>
<script>
Ext.onReady(function()
{
Ext.select("div")
//设置所有div,返回CompositeElementLite对象
.setWidth(240)
.setHeight(80)
//插入内容
.insertHtml("beforeEnd","<b>div元素</b>")
//设置css样式
.setStyle("border","2px solid black")
.setStyle("background","#afa");
});
</script>
补充:Ext Js还提供一个Ext.dom.Query工具类,该工具类专门根据CSS选择器查询一个或者多个DOM元素,该工具类如下
filter(HTMLElement [] el,String selector,Boolean nonMatches): 对html元素组使用selector选择器过滤
is(Stirng/HTMLElement/HTMLElement [] el,String selector):判断el元素是否符合选择器
selectNode(Stirng selector,[HTMLElement root]):根据selector选择器获取符合该选择器的第一个DOM节点