首页 教程 API文档

DOM控制模块

2015-10-09 11:08:39

属性


依赖模型 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元素

相关例子


得到class为abc的div元素

Std.dom("div.abc")
        
得到value为123的input元素

Std.dom("input:value('123')")
        
得到class为search下的input元素

Std.dom(".search>input");
        
得到class为search下的input元素

Std.dom("input",".search");
        
清空body

Std.dom("body").clear();
        
点击文档时候弹出123

Std.dom(document).on("click",function(){
   alert(123)
});
        
创建button元素并且添加到body下面

new Std.dom("button{text}","body");