扩展与增强DOM元素.docVIP

1 1 第 章 第 章 扩展和增强DOM元素 Prototype是一款杰出的框架，既可以将其作为主JavaScript库，也可以将其作为另一个库的基础。Prototype的部分魔力在于该框架扩展了DOM元素。通过向元素添加新的方法，Prototype使得以更加生动的方式编写跨浏览器代码变得较为容易。还有一些方法可用来处理诸如元素定位这类比较麻烦的细节。通过利用诸如getElementsByClassName和getElementsBySelectors之类的辅助方法，我们可以很容易将样式或事件应用到一组具有某种共性的元素中，从而可以更容易编写简洁的JavaScript代码。 本章内容简介： 利用Prototype扩展DOM元素 修改以及操作内容和大小 使用CSS设置元素的样式 1.1 扩展DOM元素 在Prototype出现之前，跨浏览器代码经常看上去像是路线图：大量的分支以及反反复复进行的大量的相同检查。Prototype扩展了代码操作的DOM元素，从而将日常JavaScript编程中为了跨浏览器而编写的繁杂代码集中起来。Prototype为Element.Methods和Element.Methods.Simulated对象中的所有元素均提供了扩展方法。如果该对象是input、select或textarea标记，那么还包括Form.Element.Methods中的方法。表单元素自身也将扩展，包含Form.Methods对象中的方法。这些方法中的大部分返回原始元素，因此可以将多个方法链接起来，其格式类似于$(myElement).update (updated).show();。有一点需要注意，不仅是选择的元素会扩展，而且该元素的所有子元素也都会扩展。 在支持修改HTMLEtotype的浏览器中，Prototype向HTMLElement中添加了一些方法。这意味着不需要在手动创建的每个元素上调用Element.extends()方法。可以立即开始使用Prototype方法。 var newDiv = document.createElement(div); newDiv.update(Insert some text); newDiv.addClassName(highlight); Internet Explorer浏览器不支持修改HTMLElement，因此必须调用Element.extends()方法，或者使用$()或$$()方法获取该元素的引用。 1.1.1 美元符号函数：$() 扩展DOM元素最简单的方法是使用$()函数获取元素的引用，而不是使用document. getElementById或其他方法。当通过这种方式获得引用时，Prototype会自动将Element.Methods中的所有方法添加到该元素中。如果在这个方法中传入一个字符串，那么该方法将自动获取带有指定ID的元素的引用。如果传入的是指向这个元素的引用，那么它将返回同一个引用，但是该元素将具有扩展方法。这是扩展元素的最常见方式。 body div id=myId Hello Prototype /div script type=text/javascript $(myId).hide(); /script /body 1.1.2 $$() 这个方法的工作方式与$()函数类似。它带有一个表示CSS选择器的实参，返回由所有匹配该选择器的元素构成的数组。CSS选择器是从DOM中取回特定元素的强大工具。该数组中的元素的顺序与它们在DOM中出现的顺序相同，而且每个元素都由Prototype扩展。 $$(input); // select all of the input elements $$(#myId); //select the element with the id myId $$(input.validate); //select all of the input elements with the class validate Prototype并不使用浏览器的内置CSS选择器分析功能，因此它可以自由地实现较新版本的CSS中指定的选择器。其结果就是，Prototype 1.5.1及更高版本支持CSS3的几乎所有功能。 $$(#myId input); //select all of the input elements that are children of the element with the id myId $$(table tr:nth-child(even)); //selects all of the even numbered rows of all table elements. 1