prototype如何扩展DOM

2019独角兽企业重金招聘Python工程师标准>>>

Prototype框架的最大部分是它的DOM扩展。原型$（）函数返回的元素，增加了许多方便的方法：例如，你可以写$（“意见”）addClassName（“主动”）表明（）得到的意见“的ID的元素中，添加。它的类的名称，并显示它（如果它以前被隐藏）。 “意见”元素没有在本地JavaScript的方法，这怎么可能呢？该文件显示在原型中发现了一些聪明的黑客。

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();// insert it in the documentdocument.body.appendChild(my_div);

我们的方法调用，只是变得更短，更直观！如前面提到中，Element.extend（）复制所有的方法，从Element.Methods我们的元素，它会自动成为第一个参数为所有这些功能。延长（）方法是不够聪明，不要试图操作上两次相同的元素。有什么更好的，**美元的函数$（），通过它的每一个元素延伸**这个机制。

var my_div = document.createElement('div');
my_div.addClassName('pending').hide();document.body.appendChild(my_div);

因为扩展本地浏览器对象的 prototype，所有的DOM元素有内置的原型扩展方法。然而，这并不是真正为IE不会让任何人触摸HTMLElement.prototype。为了让前面的例子在IE工作，你将不得不延长与Element.extend（）元素。不要担心，该方法是足够聪明，不延长元素超过一次。

由于浏览器不支持此，你必须小心使用DOM的扩展，只能在已扩展的元素。例如，上述的例子，但在Firefox和Opera，作品添加后创建的元素，使脚本真的固体Element.extend（my_div）。在下面的例子一样的快捷方式，您可以使用美元的功能：

转载于:https://my.oschina.net/prototype1/blog/71246