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 相关文章推荐
IE iframe的onload方法分析小结
Jan 07 Javascript
javascript中使用正则表达式清理table样式的代码
Apr 01 Javascript
DEDECMS如何为文章添加HOT NEW标志图片
Aug 14 Javascript
JavaScript调用传递变量参数的相关问题及解决办法
Nov 01 Javascript
JavaScript模块化开发之SeaJS
Dec 13 Javascript
jQuery内容过滤选择器用法示例
Sep 09 Javascript
Vue.js学习笔记之常用模板语法详解
Jul 25 Javascript
用vue的双向绑定简单实现一个todo-list的示例代码
Aug 03 Javascript
vue 配置多页面应用的示例代码
Oct 22 Javascript
基于Vue el-autocomplete 实现类似百度搜索框功能
Oct 25 Javascript
vue css 引入asstes中的图片无法显示的四种解决方法
Mar 16 Javascript
微信小程序获取当前时间及星期几的实例代码
Sep 20 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若干单维数组遍历方法的比较
2011/09/20 PHP
php写的带缓存数据功能的mysqli类
2012/09/06 PHP
保存到桌面、设为桌面且带图标的PHP代码
2013/11/19 PHP
PHP采集静态页面并把页面css,img,js保存的方法
2014/12/23 PHP
用php代码限制国内IP访问我们网站
2015/09/26 PHP
javascript的键盘控制事件说明
2008/04/15 Javascript
javascript实现的网页局布刷新效果
2008/12/01 Javascript
js获取下拉列表的值和元素个数示例
2014/05/07 Javascript
javascript中parseInt()函数的定义和用法分析
2014/12/20 Javascript
原生JS实现响应式瀑布流布局
2015/04/02 Javascript
jQuery EasyUI之DataGrid使用实例详解
2016/01/04 Javascript
jQuery拖拽排序插件制作拖拽排序效果(附源码下载)
2016/02/23 Javascript
JAVA Web实时消息后台服务器推送技术---GoEasy
2016/11/04 Javascript
jQuery获取Table某列的值(推荐)
2017/03/03 Javascript
彻底学会Angular.js中的transclusion
2017/03/12 Javascript
Vuex之理解Store的用法
2017/04/19 Javascript
jquery插件canvaspercent.js实现百分比圆饼效果
2017/07/18 jQuery
VSCode配置react开发环境的步骤
2017/12/27 Javascript
在vue里面设置全局变量或数据的方法
2018/03/09 Javascript
详解用Webpack与Babel配置ES6开发环境
2019/03/12 Javascript
iview的table组件自带的过滤器实现
2019/07/12 Javascript
[46:04]Liquid vs VP Supermajor决赛 BO 第四场 6.10
2018/07/05 DOTA
[01:05:56]Liquid vs VP Supermajor决赛 BO 第二场 6.10
2018/07/04 DOTA
[02:38]2018年度DOTA2最佳劣单位选手-完美盛典
2018/12/17 DOTA
wxPython窗口的继承机制实例分析
2014/09/28 Python
python+Splinter实现12306抢票功能
2018/09/25 Python
Django3.0 异步通信初体验(小结)
2019/12/04 Python
TensorFlow实现模型断点训练,checkpoint模型载入方式
2020/05/26 Python
英国经典球衣网站:Classic Football Shirts
2017/05/20 全球购物
Feelunique美国:欧洲大型的在线美妆零售电商
2018/11/04 全球购物
旅游专业职业生涯规划范文
2014/01/13 职场文书
科研课题实施方案
2014/03/18 职场文书
幼儿园教师的考核评语
2014/04/18 职场文书
详解JavaScript中Arguments对象用途
2021/08/30 Javascript
Django框架模板用法详解
2022/06/10 Python
在windows server 2012 r2中安装mysql的详细步骤
2022/07/23 Servers