Prototype_prototype の dom オブジェクト メソッドの概要

以下部分一个一个的详细介绍：

$(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") 待续。。

//update 2006-11-30 09:40

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.widget').invoke('readAttribute', 'widget_id')
// ["7", "8", "9"]

//更新 2006-12-1

getHeight: function(element): 要素の高さを返します。element.offsetHeight を返します。
classNames: function(element): Element.ClassNames オブジェクトを返します。 add、remove、set などの要素クラスに対する操作は、通常、ほとんど使用されません。Element.addClassName とその他のメソッド (すぐ下)
hasClassName: function (element, className): を使用します。 要素に className が含まれているかどうかを確認します
addClassName: function(element, className):要素にクラスを追加します
removeClassName: function(element, className):Remove
observe() の要素: は、Event オブジェクト (後で紹介する Prototype 内) の Observe メソッドを呼び出して、要素
stopObserving のイベント ハンドルを登録します。 (): 登録されたイベント ハンドルを削除します
cleanWhitespace: function(element):要素内の空白のテキスト サブノードを削除します
empty: function(element):要素が空かどうかを判定
childOf: function(element, ancestor): 要素が先祖の子孫ノードかどうかを判定
scrollTo: function(element): スクロール バーを要素に移動します。
getStyle: function(element, style): $(element).getStyle("float など) 要素の特定の CSS スタイルの値を取得します。 ")
setStyle: function(element, style): 要素の CSS スタイルを設定します。スタイルには、element.setStyle({left: "40px", "background-color) のような 11 個のオブジェクトがあります。 ":"#666"})
getDimensions: function(element): 要素の次元を取得します。要素が非表示であっても正しく返されます。 のような連想配列を返します。 return {width:originalWidth, height:originalHeight}
makePositioned : function(element): 要素の位置 css 属性が静的または存在しない場合、セカンダリ属性を相対属性に変更します
undoPositioned: function(element): makePositioned の逆の操作
makeClipping: function(element): 要素をクリッピング (スライス) にします。つまり、要素のオーバーフロー属性を設定します。要素を非表示にします
undoClipping: function(element): Inverse 上記のメソッドによって要素に加えられた変更を変更します
hasAttribute(element): 要素が特定の属性

を持っています

Element オブジェクトにはたくさんのメソッドがあります (笑) Insertion

の 4 つのクラスを紹介しましょう。

Insertion.Before: 要素の前にコンテンツを挿入します。コンテンツは要素の外側にあります
Insertion.Top:コンテンツを挿入します 要素の先頭に、コンテンツは要素内にあります
Insertion.Bottom: コンテンツを要素の最後に挿入します、コンテンツは要素内にあります
Insertion.After: 要素の後にコンテンツを挿入します。コンテンツは要素の外側にあります

それらを使用する方法は比較的単純です: new Insertion.where(element, content)。where は上記の Before、Top などを表し、content は JavaScript フラグメントが実行されることに注意してください。 🎜>

ようやく書き終わりました。Prototype には非常に多くの Element メソッドがあります

私は Prototype に比較的慣れていると感じていて、書くのに少し疲れていましたが、これらのメソッドの具体的な機能と使用法を書き留めるためには、それでも多くのことを得る必要があることがわかりました。私自身、プロトタイプのコードを 1 行ずつ書くようになりました。明らかに、私は Prototype

の多くの絶妙な記述方法をより深く理解しています。

このチュートリアルを作成する主な目的は、簡単なリファレンスを提供することです。ソース コードと比較することによってのみ、実際に改善することができます。