本教程旨在為讀者了解怎樣利用單例對象Ext.DomQuery,瀏覽穿梭于DOM樹之中和獲取對象，提供一個起點。
DomQuery的select函數有兩個參數。第一個是選擇符字符（selector string ）而第二個是欲生成查詢的標簽ID(TAG ID)。
本文中我準備使用函數“Ext.query”但讀者須謹記它是“Ext.DomQuery.select()”的簡寫方式。
這是要入手的html：
<html>
<head>
<script type="text/javascript" src="../js/firebug/firebug.js"></script>
</head>
<body>
<script type="text/javascript" src="../ext/ext-base.js"></script>
<script type="text/javascript" src="../ext/ext-core.js"></script>
<div id="bar" class="foo">
I'm a div ==> my id: bar, my class: foo
<span class="bar">I'm a span within the div with a foo class</span>
<a href="http://www.survivalescaperooms.com" target="_blank">An ExtJs link</a>
</div>
<div id="foo" class="bar">
my id: foo, my class: bar
<p>I'm a P tag within the foo div</p>
<span class="bar">I'm a span within the div with a bar class</span>
<a href="#">An internal link</a>
</div>
</body>
</html>
假設我想獲取文檔內所有的“span”標簽：
// 這個查詢會返回有兩個元素的數組因為查詢選中對整個文檔的所有span標簽。Ext.query("span"); // 這個查詢會返回有一個元素的數組因為查詢顧及到了foo這個id。Ext.query("span", "foo");注意剛才怎么傳入一個普通的字符串作為第一個參數。
按id獲取標簽，你需要加上“#”的前綴：
// 這個查詢會返回包含我們foo div一個元素的數組！Ext.query("#foo");按class name獲取標簽，你需要加上“.”的前綴：
/*這個查詢會返回有一個元素的數組，包含與之前例子一樣的div但是我們使用了class name來獲取*/Ext.query(".foo");你也可以使用關鍵字“*”來獲取所有的元素：
// 這會返回一個數組，包含文檔的所有元素。Ext.query("*");要獲取子標簽，我們只須在兩個選擇符之間插入一個空格：
// 這會返回有一個元素的數組，包含p標簽的div標簽 Ext.query("div p");// 這會返回有兩個元素的數組，包含span標簽的div標簽 Ext.query("div span");還有三個的元素選擇符，待后續的教程會敘述。 ""
如果朋友你覺得這里說得太簡單的話，你可以選擇到DomQuery 文檔看看，可能會有不少收獲:)
這些選擇符可讓你得到基于一些屬性值的元素。屬性指的是html元素中的href, id 或 class。
// 我們檢查出任何存在有class屬性的元素。// 這個查詢會返回5個元素的數組。Ext.query("*[class]"); // 結果： [body#ext-gen2.ext-gecko, div#bar.foo, span.bar, div#foo.bar, span.bar]現在我們針對特定的class屬性進行搜索。
// 這會得到class等于“bar”的所有元素Ext.query("*[class=bar]");// 這會得到class不等于“bar”的所有元素Ext.query("*[class!=bar]"); // 這會得到class從“b”字頭開始的所有元素Ext.query("*[class^=b]"); //這會得到class由“r”結尾的所有元素Ext.query("*[class$=r]"); //這會得到在class中抽出“a”字符的所有元素Ext.query("*[class*=a]");新聞熱點
疑難解答
