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 相关文章推荐
动态加载iframe时get请求传递中文参数乱码解决方法
May 07 Javascript
项目中常用的JS方法整理
Jan 30 Javascript
JavaScript实现点击单选按钮改变输入框中文本域内容的方法
Aug 12 Javascript
javascript引用类型之时间Date和数组Array
Aug 27 Javascript
Jquery 垂直多级手风琴菜单附源码下载
Nov 17 Javascript
原生JS:Date对象全面解析
Sep 06 Javascript
JavaScript中严格判断NaN的方法
Feb 16 Javascript
vue-cli axios请求方式及跨域处理问题
Mar 28 Javascript
解决vue select当前value没有更新到vue对象属性的问题
Aug 30 Javascript
npm配置国内镜像资源+淘宝镜像的方法
Sep 07 Javascript
Vue press 支持图片放大功能的实例代码
Nov 09 Javascript
VSCode 添加自定义注释的方法(附带红色警戒经典注释风格)
Aug 27 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图片处理之使用imagecopy函数添加图片水印实例
2014/11/19 PHP
WordPress中制作导航菜单的PHP核心方法讲解
2015/12/11 PHP
ucenter中词语过滤原理分析
2016/07/13 PHP
利用PHP内置SERVER开启web服务(本地开发使用)
2021/03/09 PHP
JS图片根据鼠标滚动延时加载的实例代码
2013/07/13 Javascript
javascript 中的 delete及delete运算符
2015/11/15 Javascript
jQuery实现分隔条左右拖动功能
2015/11/21 Javascript
jQuery ready()和onload的加载耗时分析
2016/09/08 Javascript
vue.js绑定class和style样式(6)
2016/12/09 Javascript
vue-router:嵌套路由的使用方法
2017/02/21 Javascript
javaScript字符串工具类StringUtils详解
2017/12/08 Javascript
关于laydate.js加载laydate.css路径错误问题解决
2017/12/27 Javascript
详解如何用babel转换es6的class语法
2018/04/03 Javascript
vue同步父子组件和异步父子组件的生命周期顺序问题
2018/10/07 Javascript
elementUI 动态生成几行几列的方法示例
2019/07/11 Javascript
在layui中使用form表单监听ajax异步验证注册的实例
2019/09/03 Javascript
微信小程序3D轮播实现代码
2019/09/19 Javascript
[53:03]Optic vs TNC 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Python中执行存储过程及获取存储过程返回值的方法
2017/10/07 Python
python实现音乐下载的统计
2018/06/20 Python
Python 3.8中实现functools.cached_property功能
2019/05/29 Python
Python3.6+Django2.0以上 xadmin站点的配置和使用教程图解
2019/06/04 Python
关于PyTorch 自动求导机制详解
2019/08/18 Python
Python any()函数的使用方法
2019/10/28 Python
pytorch程序异常后删除占用的显存操作
2020/01/13 Python
Python HTMLTestRunner测试报告view按钮失效解决方案
2020/05/25 Python
python pymysql链接数据库查询结果转为Dataframe实例
2020/06/05 Python
CSS3 :default伪类选择器使用简介
2018/03/15 HTML / CSS
基于CSS3的animation属性实现微信拍一拍动画效果
2020/06/22 HTML / CSS
HTML5验证以及日期显示的实现详解
2013/07/05 HTML / CSS
安全环保标语
2014/06/09 职场文书
学习焦裕禄精神践行三严三实心得体会
2014/10/13 职场文书
埃及王子观后感
2015/06/16 职场文书
公司开业致辞
2015/07/29 职场文书
感恩父母主题班会
2015/08/12 职场文书
html粘性页脚的具体使用
2022/01/18 HTML / CSS