Prototype使用指南之dom.js


Posted in Javascript onJanuary 10, 2007

这部分提供了很多(写的都有点烦了)方便的操作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
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 相关文章推荐
一段实时更新的时间代码
Jul 07 Javascript
javascript 写类方式之六
Jul 05 Javascript
JavaScript 七大技巧(一)
Dec 13 Javascript
详解Angularjs中的依赖注入
Mar 11 Javascript
bootstarp modal框居中显示的实现代码
Feb 18 Javascript
js中的闭包学习心得
Feb 06 Javascript
JavaScript基础心法 数据类型
Mar 05 Javascript
用vue快速开发app的脚手架工具
Jun 11 Javascript
vuex 解决报错this.$store.commit is not a function的方法
Dec 17 Javascript
Vue项目使用localStorage+Vuex保存用户登录信息
May 27 Javascript
Bootstrap简单实用的表单验证插件BootstrapValidator用法实例详解
Mar 29 Javascript
Vue用mixin合并重复代码的实现
Nov 27 Vue.js
Prototype使用指南之ajax
Jan 10 #Javascript
Prototype使用指南之range.js
Jan 10 #Javascript
Prototype使用指南之hash.js
Jan 10 #Javascript
Prototype使用指南之array.js
Jan 10 #Javascript
Prototype使用指南之enumerable.js
Jan 10 #Javascript
Prototype使用指南之base.js
Jan 10 #Javascript
Prototype使用指南之string.js
Jan 10 #Javascript
You might like
PHP HTTP 认证实例详解
2016/11/03 PHP
Zend Framework前端控制器用法示例
2016/12/11 PHP
php使用redis的有序集合zset实现延迟队列应用示例
2020/02/20 PHP
神奇的代码 通杀各种网站-可随意修改复制页面内容
2008/07/17 Javascript
另一个javascript小测验(代码集合)
2011/07/27 Javascript
上传的js验证(图片/文件的扩展名)
2013/04/25 Javascript
onbeforeunload与onunload事件异同点总结
2013/06/24 Javascript
图片放大镜jquery.jqzoom.js使用实例附放大镜图标
2014/06/19 Javascript
解决ueditor jquery javascript 取值问题
2014/12/30 Javascript
JS+CSS实现另类带提示效果的竖向导航菜单
2015/10/15 Javascript
jquery 多个radio的click事件实例
2016/12/03 Javascript
setTimeout函数的神奇使用
2017/02/26 Javascript
详解Node中导入模块require和import的区别
2017/08/11 Javascript
将Sublime Text 3 添加到右键中的简单方法
2017/12/12 Javascript
JS实现同一DOM元素上onClick事件与onDblClick事件并存的解决方法
2018/06/07 Javascript
微信小程序实现简单跑马灯效果
2020/05/26 Javascript
jQuery实现购物车全功能
2021/01/11 jQuery
python使用urllib模块开发的多线程豆瓣小站mp3下载器
2014/01/16 Python
python+selenium实现登录账户后自动点击的示例
2017/12/22 Python
python线程中同步锁详解
2018/04/27 Python
python移位运算的实现
2019/07/15 Python
手把手教你如何用Pycharm2020.1.1配置远程连接的详细步骤
2020/08/07 Python
celery在python爬虫中定时操作实例讲解
2020/11/27 Python
五个2015 年最佳HTML5 框架
2015/11/11 HTML / CSS
少先队入队活动方案
2014/02/08 职场文书
幼儿园教师获奖感言
2014/03/11 职场文书
战友聚会主持词
2014/04/02 职场文书
爱之链教学反思
2014/04/30 职场文书
北京奥运会主题口号
2014/06/13 职场文书
小学生三分钟演讲稿
2014/08/18 职场文书
2014年乡镇人大工作总结
2014/11/25 职场文书
《1942》观后感
2015/06/08 职场文书
来探秘“德国中小企业”的成功之道
2019/07/26 职场文书
Springboot如何同时装配两个相同类型数据库
2021/11/17 Java/Android
「月刊Comic Alive」2022年5月号封面公开
2022/03/21 日漫
mysql查看表结构的三种方法总结
2022/07/07 MySQL