依赖模型 | 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");