Prototype中dom对象方法汇总


Posted in Javascript onSeptember 17, 2008

以下部分一个一个的详细介绍:

$(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
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):判断元素是否有某个属性

Element对象的方法是不是不少啊,哈哈,下面介绍有关Insertion的四个类

Insertion.Before:将内容插入到元素的前面,内容在元素外面
Insertion.Top:将内容插入到元素的顶部,内容在元素里面
Insertion.Bottom:将内容插入到元素的底部,内容在元素里面
Insertion.After:将内容插入到元素后面,内容在元素外面

使用它们的方法比较简单:new Insertion.where(element, content),其中where表示上面的Before、Top等,content是html字符串,注意其中javascript片断会执行

终于写完了,Prototype的Element方法还真不少

虽然以前觉得自己对Prototype还比较熟悉,写的也有点累,但是发现自己收获仍然挺大的,为了写出这些方法的具体作用和用法,必须强迫自己一行行的把Prototype的代码弄清楚,使自己对Prototype中很多精巧的写法有了更深刻的认识和理解

写这个教程的主要目的是为了给大家一个快速的参考,大家还是对照着源代码看才会真正有所提高

Javascript 相关文章推荐
Array的push与unshift方法性能比较分析
Mar 05 Javascript
jQuery图片轮播的具体实现
Sep 11 Javascript
js+html5实现canvas绘制圆形图案的方法
Jun 05 Javascript
JavaScript中Boolean对象的属性解析
Oct 21 Javascript
js中实现字符串和数组的相互转化详解
Jan 24 Javascript
jquery实现简单的banner轮播效果【实例】
Mar 30 Javascript
浅析JavaScript中命名空间namespace模式
Jun 22 Javascript
jQuery中deferred对象使用方法详解
Jul 14 Javascript
jQuery progressbar通过Ajax请求实现后台进度实时功能
Oct 11 Javascript
微信小程序  action-sheet详解及实例代码
Nov 09 Javascript
基于Vue组件化的日期联动选择器功能的实现代码
Nov 30 Javascript
如何在Vue中使localStorage具有响应式(思想实验)
Jul 14 Javascript
Javascript 读后台cookie代码
Sep 15 #Javascript
javascript高亮效果的二种实现方法
Sep 14 #Javascript
jquery 必填项判断表单是否为空的方法
Sep 14 #Javascript
js直接编辑当前cookie的脚本
Sep 14 #Javascript
javascript一些不错的函数脚本代码
Sep 10 #Javascript
利用Ext Js生成动态树实例代码
Sep 08 #Javascript
用JavaScrpt实现文件夹简单轻松加密的实现方法图文
Sep 08 #Javascript
You might like
PHP 全角转半角实现代码
2010/05/16 PHP
php实现MD5加密16位(不要默认的32位)
2013/08/12 PHP
zf框架的registry(注册表)使用示例
2014/03/13 PHP
php中mt_rand()随机数函数用法
2014/11/24 PHP
php 猴子摘桃的算法
2017/06/20 PHP
JavaScript类型转换方法及需要注意的问题小结(挺全面)
2010/11/11 Javascript
js设置控件的隐藏与显示的两种方法
2014/08/21 Javascript
使用postMesssage()实现iframe跨域页面间的信息传递
2016/03/29 Javascript
基于BootStrap实现局部刷新分页实例代码
2016/08/08 Javascript
js放大镜放大购物图片效果
2017/01/18 Javascript
AngularJS使用angular.bootstrap完成模块手动加载的方法分析
2017/01/19 Javascript
详解ES6之用let声明变量以及let loop机制
2017/07/15 Javascript
VueJs 将接口用webpack代理到本地的方法
2017/11/27 Javascript
使用JavaScript中的lodash编写双色球效果
2018/06/24 Javascript
用Object.prototype.toString.call(obj)检测对象类型原因分析
2018/10/11 Javascript
[01:10:02]IG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python使用tkinter实现简单计算器
2018/01/30 Python
python实现简易版计算器
2020/06/22 Python
tensorflow学习教程之文本分类详析
2018/08/07 Python
python字典嵌套字典的情况下找到某个key的value详解
2019/07/10 Python
python 并发下载器实现方法示例
2019/11/22 Python
Django数据库操作之save与update的使用
2020/04/01 Python
windows上彻底删除jupyter notebook的实现
2020/04/13 Python
Python实现播放和录制声音的功能
2020/08/12 Python
matplotlib实现数据实时刷新的示例代码
2021/01/05 Python
Python中的面向接口编程示例详解
2021/01/17 Python
巴西体育用品商店:Lojão dos Esportes
2018/07/21 全球购物
Linux上比较文件的命令都有哪些
2013/09/28 面试题
通信工程专业女生个人求职信
2013/09/21 职场文书
文明和谐家庭事迹材料
2014/05/18 职场文书
民族团结先进集体事迹材料
2014/05/22 职场文书
2014年幼儿园学期工作总结
2014/12/05 职场文书
保送生自荐信范文
2015/03/26 职场文书
2015年学校管理工作总结
2015/07/20 职场文书
中学生运动会广播稿
2015/08/19 职场文书
《火纹风花雪月无双》预告“神秘雇佣兵” 紫发剑客
2022/04/13 其他游戏