【extjs6學習筆記】1.12 初始： Working with DOM

標籤：特殊屬性   css   規範   children   group   http   注意   width   基於   

http://www.extjs-tutorial.com/extjs/working-with-dom

   

Ext JS是一個DHTML庫。 它通過使用JavaScript建立或操作DOM元素來建立UI。 您可能知道，並不是所有瀏覽器都使用相同的JavaScript DOM操作方法對DOM元素執行相同的操作。 與DOM建立和操縱有關的跨瀏覽器問題。 為瞭解決跨瀏覽器問題，Ext JS包含以下類來建立或操作DOM元素。

   

Class	Description
Ext.dom.Element	Ext JS中包含單個HTML DOM元素的主類。 它包括具有規範的跨瀏覽器問題的DOM操作方法，以便程式員不必擔心跨瀏覽器問題。
Ext.dom.CompositeElement	它封裝了一組HTML DOM元素。 包括操作，過濾或對DOM元素集合執行特定操作的方法。
Ext.dom.Helper	它包括使用指定的屬性（如tag，children，cls和html）建立DOM元素的方法。
Ext.dom.Query	允許我們使用CSS3選取器搜尋dom元素，它是自己的選取器和基本的XPath查詢文法。

   

   

   

   

在上面的例子中，Ext.get（）方法返回一個Ext.dom.Element對象，該對象的id為"txtFirstName"。 然後可以使用Ext.dom.Element的各種方法來操作DOM元素，例如，set（）方法在上面的例子中用於設定輸入值。 以同樣的方式，Ext.fly（）方法用於擷取DOM元素的引用並在同一個語句中進行操作。

   

注意：當您不需要對DOM元素執行多個操作時，Ext.fly（）函數是操作DOM元素的更有效方法。 它被設計為更有效地操作並且使用較少的記憶體。

   

----------------------------------------------------------------------

   

Ext.dom.CompositeElement類的複合元素封裝多個Ext.dom.Element執行個體。 它包括在單個調用中操作這些Ext.dom.Element執行個體組的方法，以便我們不必得到每個Ext.dom.Element的引用，並且為每個元素分別執行相同的操作。

   

可以使用Ext.select（）方法檢索複合元素。 Ext.select（）方法將CSS選取器作為字串參數，並返回Ext.dom.CompositeElement或Ext.dom.CompositeElementLite的執行個體。

   

   

   

在上面的例子中，Ext.select（）返回包含所有輸入元素的Ext.dom.CompositeElement。 然後，您可以在單個語句中操作所有元素。 set（）方法設定所有選定元素的style屬性。

   

通過將不同的CSS選取器傳遞給select（）方法，並使用Ext.dom.CompositeElement的各種方法，可以選擇其他元素。

   

----------------------------------------------------------

   

Ext.dom.Helper類允許我們添加新的DOM元素，修改或刪除HTML文檔中現有的DOM元素。

DomHelper類使用具有以下特殊屬性的基於JSON的文法來建立新的DOM元素。

   

   

   

   

【extjs6學習筆記】1.12 初始： Working with DOM