(九).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有這么多方法，但是大部分都是內部調用的，我們一般都很少使用，因為我們有個一個方便的方法$$，對于絕大部分情況已經足夠了