ExtJS3 详解与实践 之 第三章

1、Ext实现了Ext.Element这个类来封装HTMLElement的对象，但是不可认为Ext.Element继承了HTMLElement，但是可以认为Ext.Element是HTMLElement的代替物

2、获取周边的元素
层次方法　　　　　　　　　　　　　　　　　　作用
findParent()　　　　　　　　　　　　　　　　定位于此节点，以此为起点，搜索外层的父节点，搜索条件必须符合并匹配传入的简易选择符
findParentNode()　　　　　　　　　　　　    定位于此节点，以此节点的父节点为起点，搜索外层的节点，搜索条件必须符合并匹配传入的简易选择
up()　　　　　　　　　　　　　　　　　　     沿着DOM，向外围搜索外层节点，搜索条件必须符合并匹配传入的简易选择
child()　　　　　　　　　　　　　　　　　　  基于送入的选择符，不限定深入的进行搜索，符合的话选取单个子节点
down()　　　　　　　　　　　　　　　　　　基于该选择符，直接选取单个子节点
parent()　　　　　　　　　　　　　　　　　 返回当前节点的那个父节点，可选的传入一个期待的选择符
next()　　　　　　　　　　　　　　　　　　 获取下一个侧边节点，跳过文本节点。可选的传入一个期待的选择符
prev()　　　　　　　　　　　　　　　　　　 获取上一个侧边节点，跳过文本节点。可选的传入一个期待的选择符
first()　　　　　　　　　　　　　　　　　　  获取第一个侧边节点，跳过文本节点。可选的传入一个期待的选择符
last()　　　　　　　　　　　　　　　　　　　获取最后一个侧边节点，跳过文本节点。可选的传入一个期待的选择符
获取周边节点的查询方法，表面上都以Ext.Element.*方法但是程序，实际上，维护元素DOM的方法的实质是委派Ext.DomHelper来完成的

3、元素的增删改查
　　键"key"名称的约定：
　　　　键名　　　　　　　　　　约定
　　　　tag　　　　　　　　　　标签名称，如div、span、table等
　　　　cls　　　　　　　　　　 元素样式类，可以接受多个样式类，空格分隔
　　　　children(cdn)　　　　　此值可为Array/Object类型，单个元素可以用Object类型定义子元素。可以不断嵌套子元素。如果不利用Dom Config定义子元素，可以使用html项的字符串定义子元素
　　　　html　　　　　　　　　 文本内容，就是innerHTML属性
　　示例：
　　　　var list = Ext.DomHelper.append('testID',{
　　　　　　tag:'ul',cls:'my-list',cdn:[
　　　　　　　　{tag:'li',id:'item0',html:'List Item 0'},
　　　　　　　　{tag:'li',id:'item1',html:'List Item 1'}
　　　　　　]
　　　　});
　　DomHelper不支持解析标准类型的DOM元素对象，此时，我们用Ext.Element进行元素转换
　　　　var ml = new Ext.Element(document.createElement('div'));
　　　　document.body.appendChild(ml.dom);
　　　　var ml2 = new Ext.Element(document.createElement('div'));
　　　　Ext.getBody().appendChild(ml2.dom);

4、操作DOM的方法
　　

操作DOM的方法

语法	示例的片段
Ext.Element.appendChild() 传入一个或多个元素，加入到该元素 添加的元素和当前元素是同级的
Ext.Element.createChild()  传入一个DomHelper对象，将其创建并加入到该元素 可选的指定在其子元素之前的地方插入
Ext.DomHelper.append() 创建新的DOM并将其加入到el元素中
Ext.Element.appendTo() 把这个元素添加到送入的元素里
Ext.DomHelper.overwrite() 创建新的DOM元素并覆盖el的内容
Ext.Element.replace() 用于当前这个元素替换传入的元素
Ext.DomHelper.insertBefore()/insertAfter() Ext.Element.insertBefore()/insertAfter() 传入元素的参数，并将该元素的DOM插入其后/之前
Ext.Element.insertFirst() 插入或创建一个元素 作为该元素的第一个子元素
Ext.Element.insertSibling() 插入(创建)一个元素或DomHelper配置项对象， 作为该元素的兄弟节点
Ext.Element.remove() 从DOM里面删除该元素， 并从缓存中删除