Prototype - Element class methods

Prototype JavaScript framework 에서 제공하는 엘리먼트와 이벤트의 클래스 메서드 입니다. Script.aculo.us는 Prototype의 여러 메서드를 사용자가 편하게 이용할 수 있도록 각종 모션효과들을 만들어 줍니다. 하지만, 애써 클래스 메서드까지 익혀야 필요성이 있습니다. Script.aculo.us는 간접적인 효과만을 보여주기 때문입니다.

우리는 지금까지 자바스크립트를 사용하여 아주 간단한 기능을 구현할 때에도 크로스-브라우저 지원을 위해 각종 환경변수를 만들어야 했습니다. Prototype은 이러한 문제를 일거에 해결해 줍니다. 그리고 메서드를 사용하면 코드의 문맥이 매우 아름다워(?)집니다. 엘리먼트를 숨기기위해 더이상 알록달록한 자바스크립트를 사용할 필요가 없어진 것입니다.

자바스크립트 : document.getElementById("element").style.display = 'none';
프로토타입(노헬퍼) : $('element').setStyle({display:none});
프로토타입(헬퍼사용) : Element.hide('element');

아주 간결하지요? 엘리먼트(Element)와 이벤트(Event) 클래스 메서드(Class Method)는 모션효과에서 요긴하게 사용되는 클래스입니다. 아래는 Prototype에서 현재 지원하는 클래스 목록입니다. (헬퍼 메서드를 사용하면 다소 간편한 반면, 처리속도가 급격히 떨어진다. - 글쓴이 주)

Element class methods

* Element.visible 엘리먼트의 활성화 여부 확인
* Element.toggle 보임 또는 안보임으로 토글
* Element.hide 지정한 엘리먼트를 숨긴다.
* Element.show 지정한 엘리먼트를 보인다.
* Element.remove 지정한 엘리먼트를 지운다.
* Element.update 엘리먼트의 내용을 새로 고친다.
* Element.getHeight 엘리먼트의 높이값을 구한다.
* Element.classNames Class 이름을 리턴한다.
* Element.hasClassName Class 이름을 확인한다.
* Element.addClassName Class를 추가한다.
* Element.removeClassName Class를 지운다.
* Element.cleanWhitespace 내용없는것을 싹지운다.
* Element.empty inner HTML을 비운다.(불확실)
* Element.scrollTo 부드럽게 화면을 스크롤한다.
* Element.getStyle 엘리먼트의 Style을 가져온다.
* Element.setStyle 엘리먼트의 Style을 지정한다.
* Element.getDimensions 높이, 너비값을 가져온다.

Event class methods

* Event.observe
노드 값을 리턴하는 이벤트 헨들러를 지정한다.
* Event.stopObserving
observe 이벤트 핸들러를 지운다.
* Event.element
엘리먼트에 이벤트를 지정한다.
* Event.isLeftClick (아직 안됨)
* Event.pointerX
포인터 x좌표에 반응하는 이벤트
* Event.pointerY
포인터 y좌표에 반응하는 이벤트
* Event.stop
모든 이벤트를 중지한다.
* Event.findElement
지정한 태그이름에서 노드값을 찾으면, 방아쇠가 당겨진다?
* Event.unloadCache

출처 : firejune