`
sunfengcheng
  • 浏览: 183865 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

DOM 模型和 Prototype

阅读更多
 
今天介绍一下 DOM 模型和 Prototype框架的一些对象和类,
什么是 DOM模型 --Document Object Module 就是文档对象类型,可以看成是结构化的树形的数据
,闲言少叙书归正传,下面是我最近学习js搜集到的一些document的方法,很实用的。下面将介绍它包含的对象方法。
下面有下载文件:能读懂的就看看下面的prototype.js

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的字符串表示

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的字符串表示

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的元素

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

Insertion.Before:将内容插入到元素的前面,内容在元素外面

Insertion.Top:将内容插入到元素的顶部,内容在元素里面

Insertion.Bottom:将内容插入到元素的底部,内容在元素里面

Insertion.After:将内容插入到元素后面,内容在元素外面

以上的这些方法经常会使用到的,不过里面有很多方法我也没有使用过,有些是在网上搜集的,有的是在书上找到的,里面有很多在最近制作google日历时用到了,在js创建表格,div什么虽然具有挑战,比起其他使用起来麻烦多了,但是很有逻辑性的。
  希望上面能给JavaScript的学习使用的同仁带来方便,这里可是实现Ajax的关键因素。

提供给大家参考学习,这是经常用到的。
  • prototype.rar (26.7 KB)
  • 描述: 想使用 prototype 框架下的方法的请看这里的代码,并且要包含到你索引用的模板视图里面
  • 下载次数: 12
2
2
分享到:
评论

相关推荐

    web开发文档大全 js HTML5 dom prototype jquery

    在Web开发领域,JavaScript、HTML5、DOM、Prototype和jQuery是不可或缺的核心技术。这份压缩包文件包含了一系列关于这些主题的参考资料,旨在帮助开发者快速查阅和理解相关知识点。 首先,JavaScript是一种广泛使用...

    mootools和prototype的开发文档

    Prototype简化了DOM(文档对象模型)的处理,提供了`$`选择器,类似于jQuery的用法,可以快速选取页面元素。此外,还有`Element`和`Selectors`模块,用于更复杂的元素操作和CSS选择器匹配。 #### 1.2 对象扩展与...

    API大全,整合html5,css,js,dom,php,prototype api等

    这个资源集合了多个编程语言和技术领域的API,包括HTML5、CSS、JavaScript、DOM、PHP和Prototype。 HTML5是超文本标记语言的最新版本,它引入了许多新特性,如音频和视频元素、离线存储、图形绘制(Canvas)、表单...

    prototype开发文档和prototype.js文件

    2. **DOM操作**:Prototype简化了对HTML文档对象模型(DOM)的操作,如查找元素、创建新元素、修改元素属性等。它还提供了一种基于CSS选择器的元素查找方式,使得操作DOM更加便捷。 3. **Ajax**:Prototype封装了...

    prototype 开发应用手册,笔记,prototype.js文件下载

    Prototype还包括丰富的事件处理功能,它对JavaScript原生事件模型进行了增强,提供了统一的事件绑定和解绑API,如`observe`和`stopObserving`。这使得处理用户交互更加灵活,避免了内存泄漏问题。 在工具性方面,...

    Web开发资料大全(文档手册案例等) 2【CSS JS Dom JQuery Ajax Dojo Prototype ASP SQL 截图工具 颜色选择 】

    7. **Prototype**:Prototype是一个早期的JavaScript库,为JavaScript开发提供了类和面向对象的特性,简化了DOM操作,但目前已被更现代的库如React和Vue取代。 8. **ASP**:ASP(Active Server Pages)是微软开发的...

    prototype-1.6.0.3.js+prototype1.4 、1.5中文手册+prototype1.6英文手册

    Prototype是JavaScript库,它为浏览器环境提供了强大的对象扩展和功能,尤其在处理DOM(文档对象模型)和Ajax交互时。这个压缩包包含了Prototype库的多个版本的手册和源代码文件,便于开发者理解和使用。 首先,...

    Prototype中文帮助文档

    综上所述,Prototype是一个功能丰富的JavaScript库,它通过面向对象的编程模型、强大的DOM操作、高效的Ajax支持、动画效果、JSON处理以及对数组和哈希的辅助方法,极大地提升了JavaScript开发的效率和便利性。...

    prototype

    综上所述,"prototype"在JavaScript中涉及的是原型和原型链的概念,而在描述中的`prototype.js`则可能是指Prototype JavaScript库,该库提供了丰富的DOM操作、事件处理、Ajax等功能,极大地提高了开发效率。

    prototype1.7.2

    Prototype 的核心特性包括增强的 JavaScript 对象模型、强大的 DOM 操作接口和高效的 Ajax 处理。在 1.7.2 版本中,这些特性得到了进一步优化,以提高性能和兼容性。 2. **对象扩展与类模拟** Prototype 引入了类...

    Prototype&Prototype中文手册

    1. **介绍**:解释Prototype的基本概念和目标,以及它如何简化JavaScript编程,特别是对于处理DOM(文档对象模型)和创建AJAX应用。 2. **安装与引用**:说明如何在项目中引入Prototype库,包括通过CDN或本地文件的...

    prototype.js中文手册

    Prototype.js 是一个开源JavaScript库,由Sam Stephenson于2005年创建,主要用于简化DOM(文档对象模型)操作,增强JavaScript的面向对象编程能力,以及提供实用的函数扩展。它在Web开发中扮演着重要的角色,尤其在...

    prototype-1.4.0

    - **DOM操作**:提供了一套强大的DOM(文档对象模型)操作接口,使得元素选择、创建、修改和事件处理更加简便。 - **Ajax 支持**:Prototype 提供了易用的接口进行异步通信,简化了与服务器的数据交换过程。 - **...

    prototype使用文档

    在JavaScript的世界里,Prototype和Script.aculo.us是两个非常重要的库,它们极大地提升了开发者的效率,并且为网页应用带来了丰富的交互效果。Prototype是一个强大的JavaScript框架,而Script.aculo.us则是在...

    prototype-1.4.0源码解读.js

    DOM(文档对象模型)操作是Prototype的核心之一。`Element`对象提供了一系列便捷的方法,如`$(selector)`用于选取DOM元素,`Element.Methods`包含了大量用于操作元素的函数,如`update`、`insert`、`remove`等,...

    prototype-1.6.0.2.js.rar

    这使得开发者能够构建复杂的对象模型和模块化的代码结构。 六、API文档解读 在压缩包中的"Prototype-v1.6.0.chm"文件是Prototype 1.6.0的官方API文档,包含了详细的类、方法和函数介绍,是学习和查找Prototype库...

    prototype 1.7.3版

    Prototype 提供了一套强大的 DOM(文档对象模型)操作接口,允许开发者以简洁的方式选择、创建和修改 HTML 元素。例如,`$` 函数作为一个快捷方式,用于根据 ID、CSS 选择器或 DOM 元素获取元素,而 `$$` 则用于...

    prototype1.6 中文版文档

    5. **事件处理**:Prototype扩展了JavaScript的事件模型,提供了统一的事件监听和触发机制。文档详细解释了`Event.observe()`、`Event.stop()`等事件处理函数的用法,使开发者能够更好地控制用户交互。 6. **动画...

    prototype.js javaScript插件

    "Prototype.js"是一个针对JavaScript的开源库,旨在增强和扩展JavaScript的基本功能,尤其在处理DOM(文档对象模型)操作、事件处理以及Ajax交互时提供了极大的便利。 ### 1. Prototype.js核心概念 - **原型链**:...

Global site tag (gtag.js) - Google Analytics