没有合适的资源?快使用搜索试试~ 我知道了~
资源推荐
资源详情
资源评论
Prototype中中dom对象方法汇总对象方法汇总
部分提供了很多(写的都有点烦了)方便的操作dom的方法:包含有名的$方法、
document.getElementsByClassName方法,以及Element对象、Insertion对象
以下部分一个一个的详细介绍:
$(element)::getElementById的封装,element可以是一个元素的id或元素本身,也可以是一个数组,这时返回一个数组,使
用$方法,会自动调用Element.extend(element)方法,这样的话使元素可以直接调用Element中的方法, 例如
Element.hide(element)可以写成这样$(element).hide()
document.getElementsByClassName(className, parentElement): 根据class选择元素
Element.extend(element): 扩展element,使element可以直接调用Element、Form.Element或Form中定义的方法
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的字符串表示
recursivelyCollect: function(element, property): 递归收集, 例如Element.recursivelyCollect(element, "parentNode")返回
element所有的祖先节点, 注意只返回nodeType == 1的元素,也就是不返回文本元素
ancestors: function(element): 等同于上面的例子,返回元素的所有祖先节点
descendants: function(element): 返回所有子孙节点
immediateDescendants: function(element)::返回元素的直接的子孙节点(子节点)的数组
previousSiblings: function(element)::返回元素前面的兄弟节点
nextSiblings: function(element)::返回位于元素后面的兄弟节点
siblings: function(element)::返回元素所有的兄弟节点
match: function(element, selector)::使用Selector的match方法匹配元素(Selector将在后面介绍), selector参数是一个css
selector表达式或者Prototype中的一个Selector实例,如果element匹配selector则返回true,否则返回false,例如对于一个
className为logcss的div来说,下面的表达式返回true, $(element).match("div.logcss") 待续。。
//update 2006-11-30 09:40
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的元素
readAttribute(element, name)::return $(element).getAttribute(name),之所以添加这个方法是因为在IE和Safari(Mac)中
getAttribute不是一个真正的函数,它没有call、apply等方法,所以在很多时候调用会出现错误(Prototype中很多地方使用了函
数的这两个方法),例如下面的例子(官方文档中的一个例子),就只能使用readAttribute:
<div id="widgets">
<div class="widget" widget_id="7">...</div>
<div class="widget" widget_id="8">...</div>
<div class="widget" widget_id="9">...</div>
</div>
$$('div.widget').invoke('readAttribute', 'widget_id')
// ["7", "8", "9"]
//Update 2006-12-1
getHeight: function(element)::返回元素高度,return element.offsetHeight
classNames: function(element)::返回一个Element.ClassNames对象,改对象提供对元素class的操作,包括add、
remove、set等,一般很少使用,使用Element.addClassName等方法就可以了(就在下面)
hasClassName: function(element, className) ::判断element是否含有className
addClassName: function(element, className) ::给element添加一个class
资源评论
weixin_38655987
- 粉丝: 8
- 资源: 933
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功