Rev. 2.73

Scriptaculous 1.6.4를 통해 비공식으로 배포된 프로토타입(Prototype) 1.5.0 rc1에는 많은 변화가 있다. 그중에서도 진보된 이벤트 처리와 DOM(Document Object Model) 셀렉터에 대해 알아보자.

이벤트 처리
Event.observe에 bindAsEventListener를 직접 인자로 넘길 수 있게 되었다.

var Clicker = Class.create();
Clicker.prototype = {
initialize: function(link) {
Event.observe(link, 'click', this.onClick.bindAsEventListener(this, 'red'));
},
onClick: function(event, color) {
Event.element(event).setStyle({color: color});
Event.stop(event);
}
}

new Clicker('cool');

간단한 DOM 메서드
그동안 DOM 다루기는 정말로 고통스러웠다. rc1은 정말로 간단하게 DOM을 선택할수 있는 메서드를 제공하고 있다. 자식노드를 선택하거나 가로질러 선택하거나 부모노드를 선택할 때 매우 간단하게 처리할 수 있다.

$('menu').up(); // 부모노드 반환
$('menu').down() // 자식노드 반환
$('menu').next() // 다음노드 반환(동일한 레벨에있는 노드)
$('menu').previous() // 이전노드 반환(동일한 레벨에있는 노드)
$('menu').down(2) // 3번째 자식노드 반환
$('menu').down('li', 0) // 자식노드중 첫번째 li태그 반환
$('sidebar').descendants() // 자식노드들의 배열 반환
$('selected').previousSiblings() // 주변에 있는 이전 노드들의 배열 반환
$('actions').ancestors() // 부모노드들의 배열 반환
$('actions').siblings() // 주변에있는 다음 노드들의 배열 반환

멋지지 않은가? "$('menu').childNodes[3].firstChild.firstChild"와 같은 지저분하고 비효율적인 짓을 하지 않아도 된다. 더욱이 파이어폭스는 firstChild로 접근하면 #text를 반환하는 경우가 허다하기 때문에 모든 브라우저에서 통용되는 DOM을 다루기란 결코 쉬운일이 아니었다. 이와 같은 메서드의 출현은 매우 반가운 일이다. 따라서 XML도 더욱 다루기 쉽게 되었다. 만세!

인용 원문 : encytemedia.com

Comments

Got something to add? You can just leave a comment.

Your Reaction Time!

captcha

avatar