這部分提供了很多(寫的都有點(diǎn)煩了)方便的操作dom的方法：包含有名的$方法、document.getElementsByClassName方法，以及Element對(duì)象、Insertion對(duì)象

以下部分一個(gè)一個(gè)的詳細(xì)介紹：

$(element)：getElementById的封裝，element可以是一個(gè)元素的id或元素本身，也可以是一個(gè)數(shù)組，這時(shí)返回一個(gè)數(shù)組，使用$方法，會(huì)自動(dòng)調(diào)用Element.extend(element)方法，這樣的話使元素可以直接調(diào)用Element中的方法, 例如Element.hide(element)可以寫成這樣$(element).hide()

document.getElementsByClassName(className, parentElement): 根據(jù)class選擇元素

Element.extend(element): 擴(kuò)展element，使element可以直接調(diào)用Element、Form.Element或Form中定義的方法

Element對(duì)象的方法：

visible: function(element)：判斷element是否可見, 參數(shù)element可以是元素本身或元素id(下面的方面的參數(shù)基本上都是這樣的)
toggle: function(element)：反轉(zhuǎn)element的可見性
hide: function(element)：隱藏元素
show: function(element)：顯示元素
remove: function(element)：移除元素
update: function(element, html) ：使用html更新element的內(nèi)容，html中的script會(huì)執(zhí)行(下同)
replace: function(element, html)：將element替換為html
inspect: function(element)：element的字符串表示
recursivelyCollect: function(element, property): 遞歸收集, 例如Element.recursivelyCollect(element, "parentNode")返回element所有的祖先節(jié)點(diǎn), 注意只返回nodeType == 1的元素，也就是不返回文本元素
ancestors: function(element): 等同于上面的例子，返回元素的所有祖先節(jié)點(diǎn)
descendants: function(element): 返回所有子孫節(jié)點(diǎn)
immediateDescendants: function(element)：返回元素的直接的子孫節(jié)點(diǎn)(子節(jié)點(diǎn))的數(shù)組
previousSiblings: function(element)：返回元素前面的兄弟節(jié)點(diǎn)
nextSiblings: function(element)：返回位于元素后面的兄弟節(jié)點(diǎn)
siblings: function(element)：返回元素所有的兄弟節(jié)點(diǎn)
match: function(element, selector)：使用Selector的match方法匹配元素(Selector將在后面介紹), selector參數(shù)是一個(gè)css selector表達(dá)式或者Prototype中的一個(gè)Selector實(shí)例，如果element匹配selector則返回true，否則返回false，例如對(duì)于一個(gè)className為logcss的div來說，下面的表達(dá)式返回true, $(element).match("div.logcss") 待續(xù)。。

//update 2006-11-30 09:40

up(element, expression, index)：利用Selector.findElement方法找到element元素的祖先節(jié)點(diǎn)中符合表達(dá)式expression的所有元素組成的數(shù)組索引為index的元素，也可以忽略expression(默認(rèn)為*，表示匹配所有元素)和index(默認(rèn)為0)，直接這樣調(diào)用up(element, index)或up(element)
down(element, expression, index)：跟up一樣，只是返回的是子孫節(jié)點(diǎn)
previous(element, expression, index)：返回前面的兄弟節(jié)點(diǎn)
next(element, expression, index)：返回后面的兄弟節(jié)點(diǎn)
getElementsBySelector(element,args)：Selector.findChildElements(element, args)的封裝，args表示可以傳遞多個(gè)參數(shù)，每個(gè)參數(shù)是一個(gè)css selector表達(dá)式，返回element的子孫節(jié)點(diǎn)中符合任何一個(gè)css selector表達(dá)式的元素組成的數(shù)組
getElementsByClassName(element, className)：返回element中的子孫節(jié)點(diǎn)中符合clsssName的元素
readAttribute(element, name)：return $(element).getAttribute(name)，之所以添加這個(gè)方法是因?yàn)樵贗E和Safari(Mac)中g(shù)etAttribute不是一個(gè)真正的函數(shù)，它沒有call、apply等方法，所以在很多時(shí)候調(diào)用會(huì)出現(xiàn)錯(cuò)誤(Prototype中很多地方使用了函數(shù)的這兩個(gè)方法)，例如下面的例子(官方文檔中的一個(gè)例子)，就只能使用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"]

//Update 2006-12-1

getHeight: function(element)：返回元素高度，return element.offsetHeight
classNames: function(element)：返回一個(gè)Element.ClassNames對(duì)象，改對(duì)象提供對(duì)元素class的操作，包括add、remove、set等，一般很少使用，使用Element.addClassName等方法就可以了(就在下面)
hasClassName: function(element, className) ：判斷element是否含有className
addClassName: function(element, className) ：給element添加一個(gè)class
removeClassName: function(element, className) ：移除元素中的一個(gè)class
observe()：調(diào)用Event對(duì)象(Prototype中的，將在后面介紹)的observe方法為元素注冊(cè)事件handle
stopObserving() ：移除注冊(cè)的事件handle
cleanWhitespace: function(element)：移除元素中空白的文本子節(jié)點(diǎn)
empty: function(element)：判斷元素是否為空
childOf: function(element, ancestor) ：判斷element是否為ancestor的子孫節(jié)點(diǎn)
scrollTo: function(element) ：滾動(dòng)條移動(dòng)到元素所在的地方
getStyle: function(element, style) ：得到元素某個(gè)css樣式的值，例如$(element).getStyle("float")
setStyle: function(element, style) ：設(shè)置元素的css樣式，style十一個(gè)對(duì)象，例如element.setStyle({left: "40px", "background-color":"#666"})
getDimensions: function(element) ：得到元素的尺寸，即使元素是隱藏的也可以正確的返回，返回 return {width: originalWidth, height: originalHeight}這樣的關(guān)聯(lián)數(shù)組
makePositioned: function(element) ：當(dāng)元素的position css屬性為static或不存在使，將次屬性更改為relative
undoPositioned: function(element) ：跟makePositioned相反的操作
makeClipping: function(element) ：把元素變成clipping(切片)，也就是設(shè)置元素的overflow屬性為hidden
undoClipping: function(element)：反轉(zhuǎn)上面的方法對(duì)元素所做的修改
hasAttribute(element)：判斷元素是否有某個(gè)屬性

Element對(duì)象的方法是不是不少啊，哈哈，下面介紹有關(guān)Insertion的四個(gè)類

Insertion.Before：將內(nèi)容插入到元素的前面，內(nèi)容在元素外面
Insertion.Top：將內(nèi)容插入到元素的頂部，內(nèi)容在元素里面
Insertion.Bottom：將內(nèi)容插入到元素的底部，內(nèi)容在元素里面
Insertion.After：將內(nèi)容插入到元素后面，內(nèi)容在元素外面

使用它們的方法比較簡(jiǎn)單：new Insertion.where(element, content)，其中where表示上面的Before、Top等，content是html字符串，注意其中javascript片斷會(huì)執(zhí)行

終于寫完了，Prototype的Element方法還真不少

雖然以前覺得自己對(duì)Prototype還比較熟悉，寫的也有點(diǎn)累，但是發(fā)現(xiàn)自己收獲仍然挺大的，為了寫出這些方法的具體作用和用法，必須強(qiáng)迫自己一行行的把Prototype的代碼弄清楚，使自己對(duì)Prototype中很多精巧的寫法有了更深刻的認(rèn)識(shí)和理解

寫這個(gè)教程的主要目的是為了給大家一個(gè)快速的參考，大家還是對(duì)照著源代碼看才會(huì)真正有所提高

這時(shí)我第一次寫比較完整的一個(gè)教程，錯(cuò)誤幼稚的地方在所難免，希望大家批評(píng)指正，互相學(xué)習(xí)提高，

如果我寫的東東對(duì)你有一些些小小的幫助，我就會(huì)非常高興了

最新評(píng)論