ExtJs4學習（二）：Dom文檔操作

標籤：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");

其實Ext.get("div1")與$("#div1")還是有區別的，前者只會擷取匹配的第一個元素，後者是匹配的元素集合。ExtJs的等價用法如下：

[ExtJs]

Ext.select("#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 不需要長期保持重複調用，用後者較為合理。下面通過一個例子來體現他們的區別：

//這樣更新的是div1var div1 = Ext.get("div1");Ext.get("div2");div1.update("我想更新div1"); //將get替換成fly後.... //更新的卻是div2var div1 = Ext.fly("div1");Ext.fly("div2");<pre name="code" class="javascript">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//擷取Htmle.html();//更新Htmle.html("<b>更新後的Html</b>"); //值e.val();e.val(150);

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

我們發現，再次調用Ext.fly後，更新的是DIV2，而再次調用Ext.get不會影響更新的元素。

二、屬性

注意：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//擷取Htmle.html();//更新Htmle.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//擷取Htmle.first().dom.innerHTML;//更新Htmle.first().update("<b>更新後的Html</b>");//值e = Ext.get("text1");e.getValue();e.set({ value: 150 });

四、篩選[JQuery]

var e = $(".c1");//過濾//擷取匹配的第二個元素e.eq(1);//再次篩選，屬性title=t1的dive.filter("div[title=t1]");//父節點Id=div1時返回truee.parent().is("#div1");//尋找//擷取集合中第一個，最後一個：e.first();e.last();//前一個，後一個：e.prev();e.next();//子節點第一個，最後一個：var e2 = $("#div1");e2.children().first();e2.children().last();

[ExtJs]

var e = Ext.select(".c1");//過濾//擷取匹配的第二個元素e.item(1);//再次篩選，屬性title=t1的div,集合中不滿足條件的元素自動移去e.filter("div[title=t1]");e = Ext.select(".c1");//父節點Id=div1時返回truee.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();

五、文檔處理[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();//清空標籤內的htmle.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");});