• 1. 《Easy-Ext》 第五讲 Ext基础架构_操作DOM(二)讲师:白鹤翔
  • 2. Easy-Ext DOM概述 嗯!首先,什么是DOM(Document Object Model) W3C对DOM的定义:文档对象模型是一个平台,一个中立于语言的应用程序编程接口(API),允许程序访问并更改文档的内容、结构和样式。 其实DOM是一种通用的模型、不止在我们的HTML中存在,也可以在其他文件中存在,相信你最熟悉的就是XML了吧,其实还有很多... DOM的发展也非常的漫长,版本延续,产生了0级DOM、1级DOM、2级DOM和最新的3级DOM,那么相对成熟的就是从2级DOM以后了。每一次版本更新都有非常实用的变化。 节点Node,对于nodeType、nodeName、nodeValue、getAttribute等等一些对加点的定义你一定不会陌生。
  • 3. Easy-Ext DOM概述对于DOM模型的操作,相信一个个熟悉又可爱的名字你一定知道: DOM的访问 document.getElementById、document.getElementsByTagName、document.getElementsByName、innerHTML、innerText等等一些方式去访问DOM元素 DOM的CRUD createElement、parentNode、childNodes、appendChild、removeChild、replaceChild、inertBefore、firstChild、previousSibling等等一系列操作DOM的方式 对于DOM的样式 我也相信你非常的了解,只需要给节点添加一个style属性,我们就可以操作该节点的样式,或者触发事件改变样式,又或者根据需求操作DOM变换不同的动画效果等等,这都离不开style属性。
  • 4. Easy-Ext Ext.Element 好了,对于旧时代的DOM我们暂且放在一边、那么Ext的出现,让以上这些对于DOM的概念变得简单、实用。 Ext之DOM Ext中使用了三个核心的工具类对我们掌握的DOM进行了完美的封装,OK,请记住他们的名字: Ext.Element(几乎对DOM的一切进行了彻底封装) Ext.DomHelper(嗯,他是一个强大的操控UI界面的工具类) Ext.DomQuery(用来进行DOM节点查询)
  • 5. Easy-Ext Ext.ElementExt.Element这个类是Ext封装底层HTML的最核心的类了。
  • 6. Easy-Ext Ext.ElementExt.Element常用方法: 如果你深深迷恋着Ext,那么你一定知道Ext.Element这个类,4.x版本由于进行了底层的重构,从而让我看到了更加简洁清晰的代码,那就是这个js文件:AbstractElement.js,他里面有俩个顶顶大名的函数,让开发者再次感叹Ext底层的强大。他们就是Ext.get和Ext.fly。嗯!请记住他们的名字!!一个方法使用了缓存机制来提升获取DOM节点的效率,而另一个方法则使用了javascript经典的‘享元模式’来提升效率,从而节约内存,更加低碳化。 Ext.get (Ext.Element.get) Ext.fly(Ext.Element.fly) Ext.getDom 获取元素的总结: Ext.get比较消耗内存,尽量避免使用。 Ext.fly虽然比较省内存,但是只能被使用一次。 Ext.getDom非常适合直接获取页面元素,并返回的就是DOM元素,如果你想操作DOM元素的属性,那这个方法是最好不过的咯
  • 7. Easy-Ext Ext.ElementExt.Element提供了181个方法,嗯,还没完,只是在4.1版本中是这样,最新的4.2版本貌似又增加了新方法,可谓是相当丰富给力。那么根据操作类型基本可以分为查询系、DOM操作系、样式操作系、对齐、尺寸、定位、拖放、滚动、键盘、动画系等方法供开发人员使用。由于API是英文版本,我特意花了一个下午时间把他们整理了出来,共同学们参考使用!!
  • 8. Easy-Ext Ext.Element 查询系方法: contains:判断元素是否包含另一个元素 child:从元素的直接子元素中选择与选择符匹配的元素 down:选择与选择符匹配的元素的子元素 first:选择元素第一个子元素 findParent:查找与简单选择符匹配的元素的父元素 findParentNode、up:查找与简单选择符匹配的元素的父元素 is:判断元素是否匹配选择符 last:选择元素的最后一个子元素 next:选择元素同层的下一个元素 prew:选择元素同层的上一个元素 parent:返回元素的父元素 Ext.query:根据选择符获取元素 Ext.select:根据选择符获取元素集合
  • 9. Easy-Ext Ext.ElementDOM操作系方法: appendTo:将当前元素追加到指定元素中 appendChild:在当前元素中追加元素 createChild:在元素中插入由DomHelper对象创建的元素 inertAfter:将元素插入到指定元素之后 inertBefore:将元素插入到指定元素之前 inertSibling:在当前元素前或后插入(或创建)元素(同层)。 insertHtml:在当前元素内插入HTML代码 remove:移除当前元素 replace:使用当前元素替换指定元素 replaceWith:使用创建的元素替换当前的元素 wrap:创建一个元素,并将当前元素包裹起来。
  • 10. Easy-Ext Ext.Element 样式操作系方法(一): addCls:增加CSS样式到元素,重复的样式会自动过滤 applyStyles:设置元素的style属性 setStyle:为元素设置样式 getStyle:返回元素的当前样式和计算样式 getStyleSize:返回元素的样式尺寸 setOpacity:设置不透明度 clearOpacity:;清理不透明度设置 getColor:返回CSS颜色属性的值,返回值为6位数组的16进制颜色值 boxWrap:使用box.Markup定义的HTML代码包装元素
  • 11. Easy-Ext Ext.Element 样式操作系方法(二): addClsOnClick添加样式当点击该元素的时候 addClsOnOver添加样式当鼠标移动到元素上的时候 getMargin:返回值具有top、left、right、bottom属性的对象,属性值为响应的元素margin值。 removeCls:删除元素的样式 replaceCls:替换元素的样式 set:设置元素属性 radioCls:为当前元素添加样式,并删除其兄弟节点的元素 unituzeBox:将表示margin大小的对象转换为字符串
  • 12. Easy-Ext Ext.Element 对齐操作系方法: alignTo:将当前元素对齐到另外一个元素。定位位置的选择是基于所对齐的元素的位置(9个定位点tl、t、tr、l、c、r、bl、b、br)。 anchorTo:当窗口调整大小时,将当前元素锚到指定元素并重新调整 removeAnchor:移除当前元素的任何锚定位
  • 13. Easy-Ext Ext.Element 尺寸大小操作系方法(一): setHeight:设置元素宽度 setWidth:设置元素高度 setSize:设置元素大小 cilp:存储元素当前的overflow设置并裁剪溢出。 unlip:在clip被调用前将裁剪值(溢出)还原为原始值 getDocumentWidth:返回文档宽度 getDocumentHeight:返回文档高度 getFrameWidth:返回合计了padding和border的宽度 getHeight:返回offsetHeight值 getWidth:返回offsetWidth值 getPadding:返回padding的宽度 getSize:返回元素的大小
  • 14. Easy-Ext Ext.Element 尺寸大小操作系方法(二): getTextWidth:返回文本宽度 getViewportHeight:返回窗口的可视高度 getViewportWidth:返回窗口的可视宽度 getViewSize:返回元素可以用来放置内容的区域大小 getBorderWidth:返回边界宽度 getComputedWidth:返回计算出来的CSS宽度 getComputedHeight:返回计算出来的CSS高度 isBorderBox:主要用于检测盒子模型,与IE6、7有关
  • 15. Easy-Ext Ext.Element定位系方法(一): clearPositioning:当文档加载完成后,清理定位回到默认值 fromPoint:返回在建瓯的自拍呢的顶层元素 getBottom:返回右下角的Y坐标 getBox:返回一个包含元素位置的对象,对象包括元素左上角的坐标值、右下角的坐标值、宽度和高度。 getCenterXY:返回元素的当前坐标 getLeft:返回一个包含元素位置的对象 getPositioning:返回一个包含CSS位置属性的对象 getRegin:返回元素所在区域 getRight:返回元素的右边X坐标 getTop:返回元素顶部Y坐标 getViewRegion:返回元素的内容区域 getX:返回元素当前的X坐标 getY:返回元素当前的Y坐标
  • 16. Easy-Ext Ext.Element 定位系方法(二): getXY:返回元素当前的XY坐标 move:移动元素 moveTo:将元素移动到指定的XY坐标上 position:初始化元素的位置 setBottom:设置元素的bottom样式 setBounds:设置元素的位置和大小 setBox:设置元素的位置大小 setLeft:设置元素坐标的X坐标 setRight:设置元素right的样式值 setLeftTop:设置元素左上角坐标 setLocation:设置元素位置 setTop:设置元素的顶部Y坐标 setX、setY、setXY:设置元素的X、Y、XY坐标位置 translatePoints:转换元素的页面坐标为CSS的left和top值
  • 17. Easy-Ext Ext.Element 滚动系方法: getScroll:返回元素当前滚动条的位置 isScrollable:如果元素允许滚动,则返回true scroll:滚动到指定位置 scrollIntoView:将元素滚动到指定容器的可视区域 scrollTo:将元素滚动到指定的位置
  • 18. Easy-Ext Ext.Element常用事件方法: addKepMap:为元素创建一个KeyMap对象 addKeyListener:为KeyMap绑定事件 常用事件 on:绑定事件 un:移除事件 click:单机事件 blur:失去焦点事件 focus:获得焦点事件
  • 19. Easy-Ext Ext.Element 其他方法(一): center:使元素居中 clean:清理空白的文本节点 createShim:为元素创建一个iframe垫片保证选择或其他对象跨域时可见 getLoader:返回ElementLoader对象 highlight 高亮显示特效 show 、hide显示隐藏元素 ghost 元素移动特效 fadeIn、fadeOout淡入淡出 slideIn、slideOut向上向下滑动
  • 20. Easy-Ext Ext.Element 其他方法(二): getValue:如果元素有value属性,返回其值 normalize:将CSS属性中的连接符号去掉,例如将“font-size”转为fontSize这样。 load:直接调用ElementLoader的load方法为元素加载内容 mask:遮罩当前元素,屏蔽用户操作。 unmask:移除遮罩 repaint:强迫浏览器重新绘画元素 serializeForm:序列化为URL编码的字符串 update:更新元素的innerHTML属性 unselectable:禁用文本选择
  • 21. Easy-Ext Ext.DomHelper我们已经学过了Element这个类,无疑是非常强大的,里面提供了丰富的方法供我们使用,但是Ext为了更加的方便我们去操作DOM元素,特提供了DomHelper这个辅助的工具类。下面我们就一起学习下DomHelper 首先从API来看,这个类暴露出的public方法并不是特别多。仅仅13个方法而已。如果想生成dom节点,在这里不建议使用原生的方法去生成dom节点,原因是代码量比较大的时候性能比较低、其二是自己组装HTML字符串比较麻烦。在Ext里,DomHelper对象类似一个元素生成器,用于解决此类问题。一般的javascript框架底层都会有生成html代码的类似功能函数。
  • 22. Easy-Ext Ext.DomHelper DomHelper常用方法: createHtml或markup方法 createDom方法 append方法 insertHTML方法 overwrite方法 createTemplate方法 applyStyles方法
  • 23. Easy-Ext Ext.DomQuery Ext.dom.Query 嗯,这个类一看就是到时做什么事儿的,不用我去过多的解释了。这个类一共提供了8个方法供开发人员去使用。 要说最常用的方法,无非就是Ext.query这个方法,之前我们已经简单接触过了这个方法,下面是此方法的详细使用规则: 基本元素选择器 id选择器 css的类选择器 标签选择器(简单选择器) 属性选择器 伪类选择器(也可以说是相当于JQ过滤选择器)
  • 24. Easy-Ext Ext.DomQuery Ext.query基本使用形式: Ext.query('span') 返回整个文档的span标签 Ext.query('span' , 'root') 根据跟节点进行查询 Ext.query('#id') 根据id进行查询,但返回数组 Ext.query('.class') 根据样式进行查询,返回数组 Ext.query('div span') 根据标签进行包含选择器过滤 Ext.query('*') 匹配所有元素 Ext.query('input[value*=val]') 进行一个属性的选择匹配 Ext.query('E>F') 进行一个层次查找父节点为E的F节点
  • 25. Easy-Ext Ext.DomQuery Ext.dom.Query其他方法: compile:将选择符或xpath编译成一个可重复使用的函数 filter:使用简单选择符过滤元素数组 is:判断元素是否匹配简单选择符 jsSelect:根据选择符选择元素