Prototype使用学习手册指南之dom.js

【 tulaoshi.com - Web开发 】

　　DOM定义对操作一个文档对象的节点结构提供了实用的方法,它提供了像执行对象插入,更新,删除,克隆等这些常用的方法。这部分提供了很多(写的都有点烦了)方便的操作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") 待续。。

　　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"]

　　getHeight: function(element)：返回元素高度，return element.offsetHeight