This Is A FineDay

( 九 ).Prototype （ 1.5 rc2) 使用指南之 dom.js

这部分提供了很多 ( 写的都有点烦了 ) 方便的操作 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

classNames: function(element) ：返回一个 Element.ClassNames 对象，改对象提供对元素 class 的操作，包括 add 、 remove 、 set 等，一般很少使用，使用 Element.addClassName 等方法就可以了 ( 就在下面 )

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

Element 对象的方法是不是不少啊，哈哈，下面介绍有关 Insertion 的四个类

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

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

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

Insertion.After ：将内容插入到元素后面，内容在元素外面

使用它们的方法比较简单： new Insertion.where(element, content) ，其中 where 表示上面的 Before 、 Top 等， content 是 html 字符串，注意其中 javascript 片断会执行

终于写完了， Prototype 的 Element 方法还真不少

虽然以前觉得自己对 Prototype 还比较熟悉，写的也有点累，但是发现自己收获仍然挺大的，为了写出这些方法的具体作用和用法，必须强迫自己一行行的把 Prototype 的代码弄清楚，使自己对 Prototype 中很多精巧的写法有了更深刻的认识和理解

写这个教程的主要目的是为了给大家一个快速的参考，大家还是对照着源代码看才会真正有所提高

这时我第一次写比较完整的一个教程，错误幼稚的地方在所难免，希望大家批评指正，互相学习提高，

( 十 ).Prototype 使用指南之 Selector

Selector 是利用 css selector 来匹配选择页面元素的，所以要理解 Selector 首先应该对 css selector 有所理解，下面是 css2 selector 的语法，当然很多浏览器只是支持其中的一部分， Prototype 中的 Selector 主要支持 tag 选择器、 class 选择器和 id 选择器，还有属性 (attribute) 选择器，基本上包含我们平时所用的所有类型

The following table summarizes CSS2 selector syntax, 详细的可以看 http://www.w3.org/TR/REC-CSS2/selector.html :

Pattern	Meaning	Described in section
*	Matches any element.	Universal selector
E	Matches any E element (i.e., an element of type E).	Type selectors
E F	Matches any F element that is a descendant of an E element.	Descendant selectors
E > F	Matches any F element that is a child of an element E.	Child selectors
E:first-child	Matches element E when E is the first child of its parent.	The :first-child pseudo-class
E:link E:visited	Matches element E if E is the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited).	The link pseudo-classes
E:active E:hover E:focus	Matches E during certain user actions.	The dynamic pseudo-classes
E:lang(c)	Matches element of type E if it is in (human) language c (the document language specifies how language is determined).	The :lang() pseudo-class
E + F	Matches any F element immediately preceded by an element E.	Adjacent selectors
E[foo]	Matches any E element with the “foo” attribute set (whatever the value).	Attribute selectors
E[foo=”warning”]	Matches any E element whose “foo” attribute value is exactly equal to “warning”.	Attribute selectors
E[foo~=”warning”]	Matches any E element whose “foo” attribute value is a list of space-separated values, one of which is exactly equal to “warning”.	Attribute selectors
E[lang|=”en”]	Matches any E element whose “lang” attribute has a hyphen-separated list of values beginning (from the left) with “en”.	Attribute selectors
DIV.warning	HTML only. The same as DIV[class~=”warning”].	Class selectors
E#myid	Matches any E element ID equal to “myid”.	ID selectors

Selector 中包含 Selector 对象和类，

Selector 对象具有下面两个方法：

match(element) ：元素是否与本 selector 匹配，在 Element 中已经介绍了
findElements(parentNode) ： parentNode 中所有匹配本 selector 的子孙元素列表

使用方法也很简单 var s=new Selector(expression); s.match(element); s.findElements($(element)) ，其中 expression 可以是如下方式 "div" 、 "#id" 、 ".class" 、 "div#id" 、 "div[attribute]" 、 "div[attribute=fff]" 、 "div[attribute!=sdf]"

其中 Selector 也有几个静态方法，它们分别是：

matchElements(elements, expression) ：返回 elements 中符合 expression 的元素列表
findElement(elements, expression, index) ：返回 elements 中符合 expression 的元素列表中索引为 index 的元素
findChildElements(element, expressions) ：找出 element 的子孙元素中符合 expressions 的元素列表，其中 expressions 是一个 expression 数组，其中的 expression 支持 "div li.#id" 形式

$$ 方法：只是简单的调用 return Selector.findChildElements(document, $A(arguments))

虽然 Selector 有这么多方法，但是大部分都是内部调用的，我们一般都很少使用，因为我们有个一个方便的方法 $$ ，对于绝大部分情况已经足够了