Ext Js入门第4篇-简化DOM操作

最新推荐文章于 2023-07-06 23:00:13 发布

淡忘过去努力未来

最新推荐文章于 2023-07-06 23:00:13 发布

阅读量444

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/qq_29258777/article/details/72650406

版权

web前端专栏收录该内容

11 篇文章 1 订阅

订阅专栏

简化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节点

淡忘过去努力未来

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ext Js入门第4篇-简化DOM操作

简化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元素本身
复制链接

扫一扫

专栏目录