[size=large][color=blue] 今天介绍一下 DOM 模型和 Prototype框架的一些对象和类,
什么是 DOM模型 --Document Object Module 就是文档对象类型,可以看成是结构化的树形的数据
,闲言少叙书归正传,下面是我最近学习js搜集到的一些document的方法,很实用的。下面将介绍它包含的对象方法。
下面有下载文件:能读懂的就看看下面的prototype.js
Element对象的方法:
visible: function(element):判断element是否可见, 参数element可以是元素本身或元素id(下面的方面的参数基本上都是这样的)
toggle: function(element):反转element的可见性
hide: function(element):隐藏元素
show: function(element):显示元素
remove: function(element):移除元素
update: function(element, html) :使用html更新element的内容,html中的script会执行(下同)
replace: function(element, html):将element替换为html
inspect: function(element):element的字符串表示
Element对象的方法:
visible: function(element):判断element是否可见, 参数element可以是元素本身或元素id(下面的方面的参数基本上都是这样的)
toggle: function(element):反转element的可见性
hide: function(element):隐藏元素
show: function(element):显示元素
remove: function(element):移除元素
update: function(element, html) :使用html更新element的内容,html中的script会执行(下同)
replace: function(element, html):将element替换为html
inspect: function(element):element的字符串表示
up(element, expression, index):利用Selector.findElement方法找到element元素的祖先节点中符合表达式expression的所有元素组成的数组索引为index的元素,也可以忽略expression(默认为*,表示匹配所有元素)和index(默认为0),直接这样调用up(element, index)或up(element)
down(element, expression, index):跟up一样,只是返回的是子孙节点
previous(element, expression, index):返回前面的兄弟节点
next(element, expression, index):返回后面的兄弟节点
getElementsBySelector(element,args):Selector.findChildElements(element, args)的封装,args表示可以传递多个参数,每个参数是一个css selector表达式,返回element的子孙节点中符合任何一个css selector表达式的元素组成的数组
getElementsByClassName(element, className):返回element中的子孙节点中符合clsssName的元素
hasClassName: function(element, className) :判断element是否含有className
addClassName: function(element, className) :给element添加一个class
removeClassName: function(element, className) :移除元素中的一个class
observe():调用Event对象(Prototype中的,将在后面介绍)的observe方法为元素注册事件handle
stopObserving() :移除注册的事件handle
cleanWhitespace: function(element):移除元素中空白的文本子节点
empty: function(element):判断元素是否为空
childOf: function(element, ancestor) :判断element是否为ancestor的子孙节点
scrollTo: function(element) :滚动条移动到元素所在的地方
getStyle: function(element, style) :得到元素某个css样式的值,例如$(element).getStyle("float")
setStyle: function(element, style) :设置元素的css样式,style十一个对象,例如element.setStyle({left: "40px", "background-color":"#666"})
getDimensions: function(element) :得到元素的尺寸,即使元素是隐藏的也可以正确的返回,返回 return {width: originalWidth, height: originalHeight}这样的关联数组
makePositioned: function(element) :当元素的position css属性为static或不存在使,将次属性更改为relative
undoPositioned: function(element) :跟makePositioned相反的操作
makeClipping: function(element) :把元素变成clipping(切片),也就是设置元素的overflow属性为hidden
undoClipping: function(element):反转上面的方法对元素所做的修改
hasAttribute(element):判断元素是否有某个属性
Insertion.Before:将内容插入到元素的前面,内容在元素外面
Insertion.Top:将内容插入到元素的顶部,内容在元素里面
Insertion.Bottom:将内容插入到元素的底部,内容在元素里面
Insertion.After:将内容插入到元素后面,内容在元素外面
以上的这些方法经常会使用到的,不过里面有很多方法我也没有使用过,有些是在网上搜集的,有的是在书上找到的,里面有很多在最近制作google日历时用到了,在js创建表格,div什么虽然具有挑战,比起其他使用起来麻烦多了,但是很有逻辑性的。
希望上面能给JavaScript的学习使用的同仁带来方便,这里可是实现Ajax的关键因素。
提供给大家参考学习,这是经常用到的。[/color][/size]
什么是 DOM模型 --Document Object Module 就是文档对象类型,可以看成是结构化的树形的数据
,闲言少叙书归正传,下面是我最近学习js搜集到的一些document的方法,很实用的。下面将介绍它包含的对象方法。
下面有下载文件:能读懂的就看看下面的prototype.js
Element对象的方法:
visible: function(element):判断element是否可见, 参数element可以是元素本身或元素id(下面的方面的参数基本上都是这样的)
toggle: function(element):反转element的可见性
hide: function(element):隐藏元素
show: function(element):显示元素
remove: function(element):移除元素
update: function(element, html) :使用html更新element的内容,html中的script会执行(下同)
replace: function(element, html):将element替换为html
inspect: function(element):element的字符串表示
Element对象的方法:
visible: function(element):判断element是否可见, 参数element可以是元素本身或元素id(下面的方面的参数基本上都是这样的)
toggle: function(element):反转element的可见性
hide: function(element):隐藏元素
show: function(element):显示元素
remove: function(element):移除元素
update: function(element, html) :使用html更新element的内容,html中的script会执行(下同)
replace: function(element, html):将element替换为html
inspect: function(element):element的字符串表示
up(element, expression, index):利用Selector.findElement方法找到element元素的祖先节点中符合表达式expression的所有元素组成的数组索引为index的元素,也可以忽略expression(默认为*,表示匹配所有元素)和index(默认为0),直接这样调用up(element, index)或up(element)
down(element, expression, index):跟up一样,只是返回的是子孙节点
previous(element, expression, index):返回前面的兄弟节点
next(element, expression, index):返回后面的兄弟节点
getElementsBySelector(element,args):Selector.findChildElements(element, args)的封装,args表示可以传递多个参数,每个参数是一个css selector表达式,返回element的子孙节点中符合任何一个css selector表达式的元素组成的数组
getElementsByClassName(element, className):返回element中的子孙节点中符合clsssName的元素
hasClassName: function(element, className) :判断element是否含有className
addClassName: function(element, className) :给element添加一个class
removeClassName: function(element, className) :移除元素中的一个class
observe():调用Event对象(Prototype中的,将在后面介绍)的observe方法为元素注册事件handle
stopObserving() :移除注册的事件handle
cleanWhitespace: function(element):移除元素中空白的文本子节点
empty: function(element):判断元素是否为空
childOf: function(element, ancestor) :判断element是否为ancestor的子孙节点
scrollTo: function(element) :滚动条移动到元素所在的地方
getStyle: function(element, style) :得到元素某个css样式的值,例如$(element).getStyle("float")
setStyle: function(element, style) :设置元素的css样式,style十一个对象,例如element.setStyle({left: "40px", "background-color":"#666"})
getDimensions: function(element) :得到元素的尺寸,即使元素是隐藏的也可以正确的返回,返回 return {width: originalWidth, height: originalHeight}这样的关联数组
makePositioned: function(element) :当元素的position css属性为static或不存在使,将次属性更改为relative
undoPositioned: function(element) :跟makePositioned相反的操作
makeClipping: function(element) :把元素变成clipping(切片),也就是设置元素的overflow属性为hidden
undoClipping: function(element):反转上面的方法对元素所做的修改
hasAttribute(element):判断元素是否有某个属性
Insertion.Before:将内容插入到元素的前面,内容在元素外面
Insertion.Top:将内容插入到元素的顶部,内容在元素里面
Insertion.Bottom:将内容插入到元素的底部,内容在元素里面
Insertion.After:将内容插入到元素后面,内容在元素外面
以上的这些方法经常会使用到的,不过里面有很多方法我也没有使用过,有些是在网上搜集的,有的是在书上找到的,里面有很多在最近制作google日历时用到了,在js创建表格,div什么虽然具有挑战,比起其他使用起来麻烦多了,但是很有逻辑性的。
希望上面能给JavaScript的学习使用的同仁带来方便,这里可是实现Ajax的关键因素。
提供给大家参考学习,这是经常用到的。[/color][/size]