프로토타입 사용 가이드: dom.js_prototype

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

//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): return element height, return element.offsetHeight
classNames: function(element): return a Element.ClassNames 개체는 추가, 제거, 설정 등 거의 사용되지 않는 요소 클래스에 대한 작업을 제공합니다. Element.addClassName 및 기타 메서드(바로 아래)를 사용하세요.
hasClassName : function(element, className):요소에 className이 포함되어 있는지 확인
addClassName: function(element, className):요소에 클래스 추가
removeClassName: 함수(요소 , className): 요소에서 클래스 제거
observe(): Event 개체의 관찰 메서드(Prototype에서는 나중에 소개됨)를 호출하여 이벤트 핸들을 등록합니다. 요소
stopObserving(): 등록된 이벤트 핸들 제거
cleanWhitespace: function(element): 요소에서 빈 텍스트 하위 노드 제거
비어 있음 : function(element): 요소가 비어 있는지 확인
childOf: function(element,ancestor): 요소가 조상의 자손 노드인지 확인
scrollTo : function(element): 요소가 있는 곳으로 스크롤 막대를 이동하세요.
getStyle: function(element, style): 다음과 같은 요소의 특정 CSS 스타일 값을 가져옵니다. $(element).getStyle( "float")
setStyle: function(element, style): 요소의 CSS 스타일을 설정하고 11개 개체의 스타일을 지정합니다(예: element.setStyle({left: "40px", " background-color ":"#666"})
getDimensions: function(element): 요소의 크기를 가져옵니다. 요소가 숨겨져 있어도 반환될 수 있습니다. 반환 {width:originWidth, height:originHeight}와 같은 연관 배열
makePositioned: function(element): 요소의 position CSS 속성이 있는 경우 정적이거나 존재하지 않는 경우 보조 속성을 상대
undoPositioned: function(element): makePositioned와 반대되는 작업
makeClipping: function(element): 요소를 클리핑(슬라이스)으로 전환, 즉 요소의 오버플로 속성을 숨김으로 설정
undoClipping: function(element):위 방법으로 요소에 적용된 수정 사항을 되돌립니다.
hasAttribute(element):요소에 특정 속성이 있는지 확인

요소객체에는 메소드가 많습니다 ㅎㅎ 삽입

의 4가지 클래스를 소개하겠습니다.

Insertion.Before: 요소 앞에 내용을 삽입하면 내용이 요소 외부에 있습니다.
Insertion.Top: 요소 위에 내용을 삽입합니다. , 콘텐츠가 요소 내부에 있는 경우
Insertion.Bottom: 콘텐츠가 요소 내부에 있는 상태에서 요소 하단에 콘텐츠를 삽입합니다.
Insertion.After: 요소 뒤에 콘텐츠를 삽입합니다. 요소 외부의 콘텐츠

사용 방법은 비교적 간단합니다. new Insertion.where(요소, 콘텐츠), 여기서 where는 위의 Before, Top 등을 나타내며 콘텐츠는 html 문자열입니다.

드디어 작성이 끝났습니다. Prototype에는 Element 메서드가 꽤 많이 있습니다

Prototype에 대해 상대적으로 익숙하고 글쓰기가 조금 피곤하다는 느낌을 받았지만, 이러한 메소드의 구체적인 기능과 사용법을 적기 위해서는 여전히 많은 것을 얻었습니다. 나는 Prototype 코드를 한 줄씩 작성하기 위해 Prototype의 다양한 정교한 작성 방법을 더 깊이 이해하고 있습니다.

이 튜토리얼을 작성하는 주요 목적은 빠른 참조를 제공하는 것입니다. 소스 코드와 비교해야만 실제로 개선할 수 있습니다.

비교적 완전한 튜토리얼을 작성한 것은 이번이 처음입니다. 실수와 유치한 실수는 피할 수 없습니다. 서로에게서 배우고 발전할 수 있도록 모두가 저를 비판하고 교정해 주셨으면 좋겠습니다.

제가 쓴 글이 여러분에게 도움이 된다면 기쁘겠습니다