【extjs6学习笔记】1.12 初始: Working with DOM

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元素。

时间: 2024-10-03 20:09:31

【extjs6学习笔记】1.12 初始: Working with DOM的相关文章

Java程序猿的JavaScript学习笔记(12——jQuery-扩展选择器)

计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript学习笔记(3--this/call/apply) Java程序猿的JavaScript学习笔记(4--this/闭包/getter/setter) Java程序猿的JavaScript学习笔记(5--prototype) Java程序猿的JavaScript学习笔记(6--面向对象模拟) Java程

java/android 设计模式学习笔记(12)---组合模式

这篇我们来介绍一下组合模式(Composite Pattern),它也称为部分整体模式(Part-Whole Pattern),结构型模式之一.组合模式比较简单,它将一组相似的对象看作一个对象处理,并根据一个树状结构来组合对象,然后提供一个统一的方法去访问相应的对象,以此忽略掉对象与对象集合之间的差别.这个最典型的例子就是数据结构中的树了,如果一个节点有子节点,那么它就是枝干节点,如果没有子节点,那么它就是叶子节点,那么怎么把枝干节点和叶子节点统一当作一种对象处理呢?这就需要用到组合模式了. 转

【extjs6学习笔记】1.8 初始: ExtJS命名约定

Convention for Description Example Class 类名应该在CamelCase中 MyCustomClass 类名应包含字母数字字符. 如果属于技术术语,则允许使用数字. Base64 不要使用下划线,连字符或任何其他非字母数字字符. 类名应至少包含一个由dot(.)分隔的唯一命名空间. TopLevelNamespace.MyClassName 不由Sencha分发的类不应该使用Ext作为顶级命名空间. 顶级命名空间和实际的类名应该在CamelCase中,其他的

【extjs6学习笔记】1.10 初始: 定义类

http://www.extjs-tutorial.com/extjs/define-new-class-in-extjs

【extjs6学习笔记】1.9 初始: Mixins

Mixin允许我们使用一个类的函数作为另一个类的函数而不继承. Mixins可以使用mixins关键字定义,并将值指定为JSON对象,其中属性的名称应该是要使用的方法的名称,属性的值将是定义方法的类的名称. ----------------------------------------------- http://www.extjs-tutorial.com/extjs/mixins

【extjs6学习笔记】1.6 初始:本地化

app.json中修改

【extjs6学习笔记】1.7 初始:加载第三方库

https://www.sencha.com/blog/integrating-ext-js-with-3rd-party-libraries-2/ Introduction Ext JS provides a lot of built-in components right out of the box that are highly customizable. If it's not in the framework, you can easily extend the classes or

【extjs6学习笔记】1.11 初始: config

Ext JS有一个名为config的功能. 该配置允许您使用默认值声明公共属性,这些属性将被其他类成员完全封装. 通过config声明的属性将自动获取get()和set()方法,如果类没有定义这些方法.

【extjs6学习笔记】1.15 初始: 关于build

调试版本 sencha app build --development 发布版本 sencha app build 说明: 使用第三方库时,目前sencha可能还有bug,会更改第三方库内容,所以发布版本可以生成后再替换为第三方自己的库 如:第三方库 xxx.js app.json配置为 "js":[ { "path":"app.js", "bundle":true }, "path":"../.