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 相关文章推荐
地震发生中逃生十大法则
May 12 Javascript
JavaScript对象之深度克隆介绍
Dec 08 Javascript
jquery实现勾选复选框触发事件给input赋值
Feb 01 Javascript
基于jquery实现下拉框美化特效
Feb 02 Javascript
Sequelize中用group by进行分组聚合查询
Dec 12 Javascript
JS简单获取当前日期和农历日期的方法
Apr 17 Javascript
Vue数据监听方法watch的使用
Mar 28 Javascript
微信小程序网络封装(简单高效)
Aug 06 Javascript
jQuery添加新内容的四个常用方法分析【append,prepend,after,before】
Mar 19 jQuery
Vue v-text指令简单使用方法示例
Sep 19 Javascript
D3.js 实现带伸缩时间轴拓扑图的示例代码
Jan 20 Javascript
javascript 函数的暂停和恢复实例详解
Apr 25 Javascript
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 方便水印和缩略图的图形类
2009/05/21 PHP
Laravel 5框架学习之Laravel入门和新建项目
2015/04/07 PHP
PHP微信刮刮卡 附微信接口
2016/07/22 PHP
php使用gearman进行任务分发操作实例详解
2020/02/26 PHP
Js的MessageBox
2006/12/03 Javascript
jQuery EasyUI API 中文文档 可调整尺寸
2011/09/29 Javascript
多种方法实现JS动态添加事件
2013/11/01 Javascript
jquery中load方法的用法及注意事项说明
2014/02/22 Javascript
JavaScript 开发工具webstrom使用指南
2014/12/09 Javascript
DOM基础教程之事件类型
2015/01/20 Javascript
jquery滚动到顶部底部代码
2015/04/20 Javascript
js实现文本框宽度自适应文本宽度的方法
2015/08/13 Javascript
JavaScript Length 属性的总结
2015/11/02 Javascript
深入理解$.each和$(selector).each
2016/05/15 Javascript
javascript运算符——逻辑运算符全面解析
2016/06/27 Javascript
JS获取input file绝对路径的方法(推荐)
2016/08/02 Javascript
详解有关easyUI的拖动操作中droppable,draggable用法例子
2017/06/03 Javascript
Vue.js 的移动端组件库mint-ui实现无限滚动加载更多的方法
2017/12/23 Javascript
如何使node也支持从url加载一个module详解
2018/06/05 Javascript
vue和webpack打包项目相对路径修改的方法
2018/06/15 Javascript
JavaScript定时器设置、使用与倒计时案例详解
2019/07/08 Javascript
Vue仿微信app页面跳转动画效果
2019/08/21 Javascript
解决vue单页面多个组件嵌套监听浏览器窗口变化问题
2020/07/30 Javascript
解决vue项目axios每次请求session不一致的问题
2020/10/24 Javascript
小米5s微信跳一跳小程序python源码
2018/01/08 Python
python中字符串数组逆序排列方法总结
2019/06/23 Python
python getpass模块用法及实例详解
2019/10/07 Python
python3中for循环踩过的坑记录
2020/12/14 Python
如何使用html5与css3完成google涂鸦动画
2012/12/16 HTML / CSS
AmazeUI 加载进度条的实现示例
2020/08/20 HTML / CSS
Linux如何命名文件--使用文件名时应注意
2012/01/22 面试题
《小动物过冬》教学反思
2014/04/17 职场文书
人事代理委托书
2014/09/27 职场文书
劳动仲裁调解书
2015/05/20 职场文书
新入职员工工作总结
2015/10/15 职场文书
Vue深入理解插槽slot的使用
2022/08/05 Vue.js