php dom扩展 linux,Linux_Prototype框架是怎样扩展DOM的，Prototype框架最大的部分就是对D - phpStudy...

Prototype框架是怎样扩展DOM的

Prototype框架最大的部分就是对DOM的扩展。Prototype框架里的$()函数返回一个网页DOM元素，框架给这个元素添加了很多方便的方法。举个例子：你可以写这样的代码 $('comments').addClassName('active').show() ，用来取得ID是“comments”的元素，给它添加一个CSS的ClassName并且显示它(假设之前是隐藏的)。本来在JavaScript里，“comments”元素是没有这些方法可用的；这是怎么实现的呢？这篇文章揭示了几个在Prototype框架里用到的技巧。

用 Element.addMethods() 添加你自己的方法

如果你有自己的DOM方法想要添加到Prototype的那一大堆方法里去凑凑热闹，没问题！Prototype也为此提供了一种机制。假设你有一组函数封装在一个对象里，只要把这个对象交给 Element.addMethods() 就可以了：

var MyUtils = {

truncate: function(element, length){

element = $(element);

return element.update(element.innerHTML.truncate(length));

},

updateAndMark: function(element, html){

return $(element).update(html).addClassName('updated');

}

}

Element.addMethods(MyUtils);

// 现在你可以：

$('explanation').truncate(100);

唯一需要注意的事情就是要确保这些方法的第一个参数是元素自身。在你的方法里，你还可以在最后返回这个元素以实现可链性(或者，就像例子里实践的那样，实现自身返回元素的方法)。

Element.extend() 方法

大多数扩展DOM方法都是封装在Element.Methods对象里的，并被复制到Element对象(提供方便之用)。这些方法都把要操作的元素作为第一个参数来接受

Element.hide('comments');

var div_height = Element.getHeight(my_div);

Element.addClassName('contactform', 'pending');

这些例子可谓简明易懂了，但是我们还有更好的方式。如果你想要操纵一个元素，你可以把这个元素交给Element.extend()，它会把所有的那些方法都直接复制给这个元素。例如，创建一个新的元素并且控制它：

var my_div = document.createElement('div');

Element.extend(my_div);

my_div.addClassName('pending').hide();

// 把元素插入到文档

document.body.appendChild(my_div);

我们的方法调用变得更短更直观了！正如上面提到的，Element.extend() 从Element.Methods把所有的方法复制到我们的元素，元素自动成为所有那些方法函数的第一个参数。extend()方法足够机灵，不会在同一个元素上尝试操作两次。更牛的是，美钞函数 $() 通过这种机制扩展了交给它的每个元素。

此外，Element.extend() 机制也适用于在FORM元素上使用Form.Methods的方法，以及在INPUT、TEXTAREA 和 SELECT 元素上使用Form.Element.Methods的方法：

var contact_data = $('contactform').serialize();

var search_terms = $('search_input').getValue();

注意并非只有美钞函数能自动扩展元素！document.getElementsByClassName、Form.getElements、双美钞 $()函数(CSS选择器)返回元素的时候，还有其他一些场合都要调用Element.extend() ……总之，你根本很少有机会需要显式地调用Element.extend()。

本地原生扩展

在这一切背后有一个秘密。

在支持向本地原生对象(诸如HTML元素)的原型添加方法的浏览器中，无需调用过Element.extend()、美钞函数或别的什么东西，所有元素的DOM扩展就是默认可用的！于是在这些浏览器中，这样的代码是有效的：

var my_div = document.createElement('div');

my_div.addClassName('pending').hide();

document.body.appendChild(my_div);

因为浏览器本地原生对象的原型被扩展了，所有的DOM元素就内建具有了原型扩展方法。但是，这在IE里是行不通的，IE不让人改动HTMLElement.prototype。为了让前面的例子在IE上也能行得通，你需要用 Element.extend() 扩展元素。毋需担心，这个方法足够机灵，不会重复扩展元素。

由于有不支持这个的浏览器的缘故，你必须注意只在元素已经被扩展了的情况下使用DOM扩展。举例来说，上面的例子在 Firefox 和 Opera 里行得通，但是在创建元素之后加上Element.extend(my_div)可以使得脚本稳定可靠。你可以用美钞函数作为快捷的写法，如下例：

// 这在 IE 里会出错：

$('someElement').parentNode.hide()

// 跨浏览器的方式：

$($('someElement').parentNode).hide()

记住了！永远要在所有(你打算支持的)浏览器里进行测试。

Prototype API文档

英文http://www.prototypejs.org/api

中文http://www.ajaxgo.org/prototype/

Prototype Copyright ? 2006 Sam Stephenson

(Bound0 译自 http://prototypejs.org/learn/extensions　可自由转载，请注明出处。)

本文作者:相关阅读:

对联广告 可关闭

SQL Server移动系统数据库开发详细解析

隐藏X-Space个人空间下方版权方法隐藏X-Space个人空间标题隐藏X-Space个人空间管理版权方法

SQL Server中的临时表和表变量

Javascript的getYear、getFullYear、getUTCFullYear异同分享

用ASP读取XML文件的具体方法与示例

初探PHP5

css中的行间距的代码

Linux安全攻略：修复系统Root密码

利用Adodb.Stream制作彩色验证码

CSS知识小结

JQuery 小练习(实例代码)

php数组函数序列之array_keys() - 获取数组键名

文字在网页上下浮动 学习可以不建议用