ExtJs4学习（二）：Dom操作

如今主流的JS框架要数ExtJs和JQuery应用的比較广泛。JQuery属于轻量级的，一般做站点应用比較常见。可见块头小的优势。

ExtJs比較庞大，它除了对主要的JS语法和HTML DOM操作方式的封装之外。还提供了一套强大的UI库。在企业级B/S解决方式应用上独占优势。就单说它在原生JS的封装，DOM操作方式封装方面也足以轻蔑JQuery。以下我就通过对照API，体现两种框架的异曲同工之处。我们已JQuery API为主线，来看看ExtJs是否有替代的方案。

注意一点：ExtJs4.0相对上一版本号修改较大，本系列文章临时仅仅对ExtJs4.0及以上版本号提供支持。

一、选择器

1.上下文选择器对照

JS对HTML节点的操作比較频繁。所以要常常定位和查询DOM元素。

我们分别看看两种框架的实现

获取Id="div1"的DOM元素:

[JQuery]

$("#div1");

[ExtJs]

Ext.get("div1");

以下是一个完整的比較代码：

[ExtJs]

//Ext.Element类 :是ExtJs对dom对象的封装

//Ext.CompositeElement类：是ExtJs对dom对象集合的封装

//查询Id=div1的元素，返回第一个匹配元素的Ext.Element类型

//该方法仅仅能查Id，不支持选择器

Ext.get("div1");

//功能同上

Ext.fly("div1");

//查询Id=div1的元素的dom对象

Ext.get("div1").dom;

//或者

Ext.getDom("div1");

//获取body元素的Ext.Element类型

Ext.getBody();

//返回当前HTML文档的Ext.Element类型

Ext.getDoc();

//查询Id=div1的元素,返回满足条件的集合Ext.CompositeElement类型

Ext.select("#div1");

//查询属性title=d1的div,返回满足条件的集合Ext.CompositeElement类型

Ext.select("div[title='d1']");

//查询属性title=d1的div,返回满足条件的dom节点集合

Ext.query("div[title='d1']");

2.选择器语法简单介绍

JQuery选择器支持CSS3选择符。ExtJs相同也提供支持。除此之外还支持主要的XPath语法。以下分别解说：

1)CSS3选择符

以下列举的命令是单个形式，都能够无限组合使用。

元素选择符：

E 一个标签为 E 的元素
E F 全部 E 元素的分支元素中含有标签为 F 的元素
E > F 或 E/F 全部 E 元素的直系子元素中含有标签为 F 的元素
E + F 全部标签为 F 并紧随着标签为 E 的元素之后的元素
E ~ F 全部标签为 F 并与标签为 E 的元素是側边的元素

属性选择符：

@ 与引號的使用是可选的。比如：div[@foo='bar'] 也是一个有效的属性选择符。

E[foo] 拥有一个名为 “foo” 的属性
E[foo=bar] 拥有一个名为 “foo” 且值为 “bar” 的属性
E[foo^=bar] 拥有一个名为 “foo” 且值以 “bar” 开头的属性
E[foo$=bar] 拥有一个名为 “foo” 且值以 “bar” 结尾的属性 =bar] 拥有一个名为 “foo” 且值包括字串 “bar” 的属性
E[foo%=2] 拥有一个名为 “foo” 且值可以被2整除的属性
E[foo!=bar] 拥有一个名为 “foo” 且值不为 “bar” 的属性

伪类：

E:first-child E 元素为其父元素的第一个子元素
E:last-child E 元素为其父元素的最后一个子元素
E:nth-child(n) E 元素为其父元素的第 n 个子元素（由1開始的个数）
E:nth-child(odd) E 元素为其父元素的奇数个数的子元素
E:nth-child(even) E 元素为其父元素的偶数个数的子元素
E:only-child E 元素为其父元素的唯一子元素
E:checked E 元素为拥有一个名为“checked”且值为“true”的元素（比如：单选框或复选框）
E:first 结果集中第一个 E 元素
E:last 结果集中最后一个 E 元素
E:nth(n) 结果集中第 n 个 E 元素（由1開始的个数）
E:odd :nth-child(odd) 的简写
E:even :nth-child(even) 的简写
E:contains(foo) E 元素的 innerHTML 属性中包括“foo”字串
E:nodeValue(foo) E 元素包括一个 textNode 节点且 nodeValue 等于“foo”
E:not(S) 一个与简单选择符 S 不匹配的 E 元素
E:has(S) 一个包括与简单选择符 S 相匹配的分支元素的 E 元素
E:next(S) 下一个側边元素为与简单选择符 S 相匹配的 E 元素
E:prev(S) 上一个側边元素为与简单选择符 S 相匹配的 E 元素

CSS 值选择符：

E{display=none} css 的“display”属性等于“none”
E{display^=none} css 的“display”属性以“none”開始
E{display$=none} css 的“display”属性以“none”结尾 =none} css 的“display”属性包括字串“none”
E{display%=2} css 的“display”属性可以被2整除
E{display!=none} css 的“display”属性不等于“none”

2)XPath语法

以下通过几个样例来说明：

/html/body/div/div :从根文件夹開始找。找到正文的第二层所有DIV。

div/div :在全文匹配DIV元素。并获取包括子DIV的所有子DIV集合。

3.Ext.get和Ext.fly的差别：

通俗点讲，他们的作用都是一样的。都是获取元素。可是前者每次调用都会生成一个Ext.Element对象。开辟新的内存空间，而后者共享了一个公用的内存空间，每次调用都会覆盖前一次的信息。因为Ext.Element 比較庞大。后者的优点是能够节省资源。假设你获取的Ext.Element 不须要长期保持反复调用。用后者较为合理。以下通过一个样例来体现他们的差别：

get(el ) :Ext.dom.Element使用了缓存机制来提升获取DOM节点的效率

fly(dom, [named] ) :Ext.dom.Element.Fly使用了JavaScript经典的享元模式来提升效率，从而节约内存，更加低碳化

//这样更新的是div1

var div1 = Ext.get("div1");

var div2 = Ext.get("div2");

div1.update("我想更新div1"); 

//将get替换成fly后....

//更新的却是div2

var div1 = Ext.fly("div1");

var div2 = Ext.fly("div2");

div1.update("我想更新div1");

我们发现，再次调用Ext.fly后，更新的是DIV2，而再次调用Ext.get不会影响更新的元素。

另外我们在这里再提一下getDom(el ) :
Object

它很适合直接获取页面元素，并返回的就是DOM元素，假设你想操作DOM元素的属性。那这种方法是最好只是的咯。

二、属性

注意：CSS类操作的几个方法相对于早期版本号有变化之前是：e.addClass("c2")

[JQuery]

var e = $("div[title=t1]");

//返回第一个匹配元素的title属性

alert(e.attr("title"));

//设置第一个匹配元素的title属性

e.attr("title", "newTitle");

//移除第一个匹配元素的title属性

e.removeAttr("title");

//CSS类

//给第一个匹配元素加入c2样式

e.addClass("c2");

//移除

e.removeClass("c1");

//轮回

e.toggleClass("c2");

//检查c2样式是否存在

e.hasClass("c2");

//Html

//获取Html

e.html();

//更新Html

e.html("<b>更新后的Html</b>");

//值

e.val();

e.val(150);

[ExtJs]

var e = Ext.select("div[title=t1]");

//属性

//返回第一个匹配元素的title属性

alert(e.first().getAttribute("title"));

//设置第一个匹配元素的title属性

e.first().set({ "title": "newTitle" });

//CSS类

//给第一个匹配元素加入c2样式

e.addCls("c2");

//移除

e.removeCls("c1");

//轮回

e.toggleCls("c2");

//检查c2样式是否存在

e.hasCls("c2");

//Html

//获取Html

e.first().dom.innerHTML;

//更新Html

e.first().update("<b>更新后的Html</b>");

//值

e = Ext.get("text1");

e.getValue();

e.set({ value: 150 });

四、筛选

[JQuery]

var e = $(".c1");

//过滤

//获取匹配的第二个元素

e.eq(1);

//再次筛选，属性title=t1的div

e.filter("div[title=t1]");

//父节点Id=div1时返回true

e.parent().is("#div1");

//查找

//获取集合中第一个，最后一个：

e.first();

e.last();

//前一个，后一个：

e.prev();

e.next();

//子节点第一个。最后一个：

var e2 = $("#div1");

e2.children().first();

e2.children().last();

[ExtJs]

select(selector, [unique] ) : 返回Ext.CompositeElement（Ext.dom.Element集合）

var e = Ext.select(".c1");

//过滤

//获取匹配的第二个元素

e.item(1);

//再次筛选，属性title=t1的div,集合中不满足条件的元素自己主动移去

e.filter("div[title=t1]");

e = Ext.select(".c1");

//父节点Id=div1时返回true

e.first().parent().is("#div1");

//查找

//获取集合中第一个，最后一个：

e.first();

e.last();

//单个元素的前一个。匹配选择器的后一个:

e.item(1).next("div[title=t2]");

e.item(1).prev();

var e2 = Ext.get("div1");

//获取子节点的第一个，最后一个：

e2.first();

e2.last();

抛开select方法另一个query(path, [root], [type], [single] ) :
返回HTMLElement[]

五、文档处理

[JQuery]

//插入

var e = $("div .c1");

//e元素结束之前插入

e.first().append("<b>新内容</b>");

//e元素開始之后插入

e.first().prepend("<b>新内容</b>");

//e元素開始之前插入

e.first().before("<b>新内容</b>");

//e元素结束之后插入

e.first().after("<b>新内容</b>");

//包裹

e.eq(2).wrap("<p></p>");

e.eq(2).unwrap();

//替换

e.eq(2).replaceWith("<b>被替换的</b>");

//删除

e.eq(3).remove();

//清空标签内的html

e.eq(0).empty();

[ExtJs]

var e = Ext.select("div .c1");

//插入

//分别在相对于文档e的四个位置插入html：

e.first().insertHtml("afterBegin", "<b>新内容</b>");

e.first().insertHtml("beforeEnd", "<b>新内容</b>");

e.first().insertHtml("beforeBegin", "<b>新内容</b>");

e.first().insertHtml("afterEnd", "<b>新内容</b>");

//包裹

e.wrap({

    tag: 'p'

});

//用text1替换集合第五个元素

e.replaceElement(4, "text1", true);

//替换用当前元素去替换掉div2标签

e.first().replace("div2", true);

//删除

e.first().remove();

//移除集合中第三个元素

e.removeElement(2, true);

六、CSS

[JQuery]

var e = $("div1");

//设置样式

e.css("width", "550px");

e.css("position", "absolute");

//设置高度

e.height(100);

//获取宽度

e.width();

[ExtJs]

var e = Ext.get("div1");

//设置样式

e.setStyle("width", "550px");

e.applyStyles({

    height: "500px",

    color: "red",

    position: "absolute"

});

//设置高度。带动画效果

e.setHeight(100, true);

//设置定位

e.setLeft("50px");

e.setTop("10px");

e.setLeftTop("100px", "50px");

//设置尺寸

e.setSize("100px", "200px");

//设置xy坐标

e.setXY([10, 10]);

//获取宽度

e.getWidth();

//获取坐标

e.getXY();

七、事件

[JQuery]

var e = $("#div1");

//事件绑定

//给元素绑定click事件：

var clickhandler = function () {

    alert("click事件被触发！");

};

e.bind("click", clickhandler);

//模拟click事件：

e.trigger("click");

//解除绑定click事件

e.unbind("click", clickhandler);

//事件切换

e.hover(function () {

    e.css("background-color", "Red");

}, function () {

    e.css("background-color", "Aqua");

});

[ExtJs]

var e = Ext.get("div1");

//事件绑定

//给元素绑定click事件：

var clickhandler = function () {

    Ext.Msg.alert("消息", "click事件被触发。");

};

e.on("click", clickhandler);

//解除绑定click事件

e.un("click", clickhandler);

//事件切换

e.hover(function () {

    e.setStyle("background-color", "Red");

}, function () {

    e.setStyle("background-color", "Aqua");

});