| 依赖模型 | plugin |
| 使用频率 | 非常高 |
| 复杂程度 | 中 |
| 成员类型 | 静态模块 |
| 前置知识 | css selector |
Std.dom模块是一个对文档对象模型(Document Object Model)操作的模块,它极大简化了DOM的操作,它内置了一大堆成员方法.
Std.dom模块使用上相对简单,但具有一定的抽象性.
Std.dom只能操作单个DOM元素,如果需要同时控制多个DOM元素,请参考Std.dom.united
它可以根据css selector来查找文档中的DOM元素,或者创建新的DOM元素. 它也可以对现有的DOM元素做包装,或者克隆.
当直接使用Std.dom方法时,内部首先会执行Std.dom.get方法获取DOM元素,并且包装起来并且返回.
当使用new Std.dom的时候,则会根据参数的类型进行创建或者克隆一个新的dom对象.
请注意直接使用Std.dom与new Std.dom的区别
| 方法名称 | 成员类型 | 描述 |
| ::extend | static | 扩展Std.dom成员方法 |
| ::on | static | 添加静态事件监听 |
| ::off | static | 删除静态事件监听 |
| ::text | static | 创建文本元素 |
| ::get | static | 获取DOM对象 |
| ::contains | static | 判断元素是否包含指定元素 |
| ::behaviorScript | static | 行为脚本 |
| ::loadHTML | static | 将html转换为DOM对象 |
| ::document | static | 获取DOM元素对应的文档 |
| ::documentElement | static | 获取指定元素的文档根元素 |
| ::isDocument | static | 判断是否document对象 |
| ::inDocument | static | 判断元素是否在文档中存在 |
| ::window | static | 获取元素对应的window对象 |
| ::isWindow | static | 判断对象是否为window对象 |
| ::query | static | 根据css选择器查询元素 |
| ::getElementsByPseudoClasses | static | 通过伪类查询元素 |
| ::getElementsByName | static | 通过指定name值查询元素 |
| ::getElementsByClassName | static | 通过class名查询元素 |
| ::getElementsByTagName | static | 通过标签名查询元素 |
| ::getElementById | static | 根据ID查询元素 |
| ::getElementsByAttribute | static | 通过属性查询元素 |
| ::elementIndex | static | 获取指定元素的索引号 |
| ::insertHTML | static | 插入html代码 |
| ::clone | static | 克隆DOM元素 |
| ::fragment | static | 创建文档碎片 |
| ::removeListener | static | 移除浏览器时间监听 |
| ::addListener | static | 添加浏览器事件监听 |
| ::clear | static | 清空元素内容 |
| ::setStyle | static | 设置元素指定风格 |
| ::getStyle | static | 获取元素指定风格 |
| ::united | static | 联合DOM模块 |
| unselect | public | 禁止文字被选中 |
| wordwrap | public | 文字强制换行 |
| wordnowrap | public | 文字强制不换行 |
| opacity | public | 元素的透明度 |
| outerWidth | public | 获取元素的外部宽度 |
| outerHeight | public | 获取元素的外部高度 |
| zIndex | public | zIndex层级值 |
| cursor | public | 元素的鼠标形状 |
| color | public | 元素的文字颜色 |
| width | public | 元素的宽度 |
| height | public | 元素的高度 |
| prevSibling | public | 获取当前同级元素的上一个元素 |
| minWidth | public | 读写元素最小宽度 |
| minHeight | public | 读写元素最小高度 |
| id | public | 读写ID值 |
| name | public | 读写name值 |
| submit | public | 执行submit行为 |
| focus | public | 让元素拥有焦点 |
| blur | public | 让元素失去焦点 |
| hasData | public | 判断元素数据是否存在 |
| data | public | 读写元素数据 |
| removeData | public | 删除指定的元素数据 |
| style | public | 读写style |
| renderTemplate | public | 在元素上渲染一个模板 |
| getStyle | public | 获取风格 |
| setStyle | public | 设置风格 |
| css | public | 元素css风格读写 |
| attr | public | 元素属性读写 |
| removeAttr | public | 移除元素指定属性 |
| removeStyle | public | 移除元素指定风格 |
| on | public | 增加事件 |
| off | public | 关闭事件 |
| emit | public | 发射事件 |
| once | public | 增加一次性事件 |
| eventAssign | public | 事件分配 |
| delegate | public | 添加事件代理 |
| undelegate | public | 取消事件代理 |
| keyboard | public | 键盘事件组 |
| hasFocus | public | 判断当前元素是否拥有焦点 |
| focussing | public | 元素焦点事件组 |
| fullScreen | public | 将元素设为全屏 |
| mouse | public | 鼠标事件组 |
| sizeControl | public | 元素大小控制 |
| widget | public | 渲染一个widget在当前元素上 |
| animate | public | 动画函数 |
| scrollLeft | public | 获取元素滚动左侧宽度 |
| scrollTop | public | 获取元素滚动条顶部高度 |
| scrollWidth | public | 获取元素包含滚动条的宽度 |
| scrollHeight | public | 获取元素包含滚动条的高度 |
| offsetWidth | public | 获取元素绝对宽度 |
| clientWidth | public | 获取元素客户区宽度 |
| offsetHeight | public | 获取元素绝对高度 |
| clientHeight | public | 获取元素客户区高度 |
| offsetLeft | public | 获取元素绝对左侧偏移 |
| offsetTop | public | 获取元素绝对顶部偏移 |
| tagName | public | 获取元素节点名称 |
| nodeName | public | 获取元素节点名称 |
| type | public | 读写type值 |
| prevSiblings | public | 获取同级之前的所有元素 |
| sibling | public | 获取附近的元素 |
| siblings | public | 获取所有同级元素 |
| swap | public | 与指定元素交换位置 |
| append | public | 在元素内部追加新内容 |
| insert | public | 将指定元素插入到指定位置 |
| insertBefore | public | 插入元素到指定位置之前 |
| insertAfter | public | 插入元素到指定位置之后 |
| detach | public | 将元素脱离父元素 |
| remove | public | 删除子元素或者自删除 |
| prepend | public | 将指定内容变为自身长子 |
| prependTo | public | 将元素放置指定位置之前 |
| appendChild | public | 追加子元素 |
| appendTo | public | 将元素追加到指定位置 |
| clear | public | 清空元素内容 |
| childNodes | public | 获取元素所有子节点 |
| children | public | 获取子元素 |
| find | public | 查找后代元素 |
| hover | public | 鼠标出入事件 |
| html | public | 读写元素内部HTML |
| outerHTML | public | 读写元素完整HTML代码 |
| insertHTML | public | 插入html |
| sheetText | public | 读取风格字符串 |
| text | public | 读写text文本 |
| value | public | 读写value值 |
| contentEditable | public | 让当前元素是可被编辑的 |
| firstChild | public | 获取第一个子元素 |
| lastChild | public | 获取最后一个子元素 |
| findSibling | public | 查找同级附近的元素 |
| nextSibling | public | 获取同级下一个元素 |
| nextSiblings | public | 获取同级后面的元素 |
| ui | public | 获取当前所属的ui对象 |
| clone | public | 克隆自己 |
| document | public | 获取当前元素相对的文档 |
| parentNode | public | 获取父元素 |
| index | public | 获取当前索引位置 |
| contains | public | 检查是否包含指定元素 |
| inDocument | public | 检查元素是否存在于文档中 |
| offsetParent | public | 获取绝对偏移的父元素 |
| parent | public | 获取父元素对象 |
| cssText | public | 读写cssText文本 |
| backgroundImage | public | 获取设置背景图地址 |
| boxSize | public | 获取盒型尺寸数据 |
| offset | public | 获取元素绝对偏移值 |
| position | public | 获取元素相对偏移值 |
| pageX | public | 获取元素左侧距离 |
| pageY | public | 获取元素顶部距离 |
| visible | public | 设置元素可视状态 |
| show | public | 显示元素 |
| hide | public | 隐藏元素 |
| size | public | 元素大小 |
| hasClass | public | 判断是否存在指定class |
| className | public | class名称 |
| addClass | public | 添加class |
| removeClass | public | 删除class |
| toggleClass | public | 切换class名称 |
| is | public | 判断是否与指定选择器相匹配 |
| method | public | 获取或执行成员方法 |
| ajax | public | ajax异步获取html值 |
| not | public | 判断是否不匹配指定选择器 |
Object Std.dom(String selector);
Object Std.dom(String selector,String selector);
Object Std.dom(String selector,Object DOMElement);
Object Std.dom(Object DOMElement);
new Std.dom(String selector);
new Std.dom(Object DOMElement);
new Std.dom(String selector,String selector);
new Std.dom(String selector,Object DOMElement);
new Std.dom(Object DOMElement,String selector);
new Std.dom(Object DOMElement,Object DOMElement);
| 名称 | 类型 | 描述 |
| selector | String | css选择器字符串 |
| DOMElement | Object | Std.com对象或DOM元素 |
Std.dom("div.abc")
Std.dom("input:value('123')")
Std.dom(".search>input");
Std.dom("input",".search");
Std.dom("body").clear();
Std.dom(document).on("click",function(){
alert(123)
});
new Std.dom("button{text}","body");