dojo by example(3) - 유틸리티 함수

남아 있는 유틸리티 함수들 중에서 정말 자주 쓰이는 몇가지만 더 알아보자.

dojo.byId(id)
document.getElementById(id)와 동일하며 프로토타입의 $(id)와 동일하다.
지정한 id를 가진 DOM 노드를 찾는다. 참고로 dijit.byId(id)와는 전혀 다른 녀석이니 헷갈리지 않기를... 그리고 다른 window(frame/iframe)의 노드를 찾고 싶을 때는 dojo.withGlobal(window,'byId',dojo,[id]) 처럼 하면 된다(뭐가 이렇게 복잡하냐고? 그래도 없는 것 보다는 낫다).
$()보다 길어서 타이핑하기 귀찮겠지만... 덕분에 프로토타입이나 jQuery와 섞어서 사용해도 아무런 문제를 읽으키지 않는다. 굳이 $()를 쓰고 싶으면 예전에 쓴 블로그를 참조하시길...

dojo.attr() - DOM 속성 관련 함수들
dojo.attr()은 getter/setter 두가지 역할을 겸하고 있으며, domNode 대신 해당 노드의 id를 문자열로 지정해도 된다.

• dojo.attr(domNode, attrName) : 지정한 DOM 노드의 지정한 속성 값을 가져온다. domNode.getAttribute(attrName)와 비슷하다.
• dojo.attr(domNode, attrName, attrValue) : 지정한 DOM 노드의 지정한 속성 값을 변경한다. domNode.setAttribute(attrName, attrValue)와 비슷하다. 참고로, dojo 1.1.1 이후 버전에서는 attrName/Value 쌍을 배열로 지정할 수 있다. 예를 들면: dojo.attr(domNode, { action: 'add.php', method: 'POST' });
• dojo.removeAttr(domNode, attrName) : 지정한 DOM 노드의 지정한 속성을 삭제한다. domNode.removeAttribute(attrName)와 비슷하다.

domNode.setAttribute/getAttribute/removeAttribute를 사용하면되는데 왜 이런게 필요하냐고 물으신다면... 자바스크립트 닭질을 좀 더 하시길 권해드리는 바이다. 일단 dojo에서 이런 걸 제공한다는 사실만 기억해두면 조만간 고맙게 쓰게 될 날이 온다.

dojo.style() - DOM CSS 속성 관련 함수들
dojo.style()도 getter/setter 두가지 역할을 겸하고 있으며, domNode 대신 해당 노드의 id를 문자열로 지정해도 된다.

• dojo.style(domNode, cssAttrName) : 지정한 DOM 노드의 스타일 중에서 지정한 CSS속성 값을 가져온다. 주의 할 점은 cssAttrName은 CSS 형식(font-size, left-padding ...)이 아닌 자바스크립트 형식(fontSize, leftPadding ...)으로 지정해야 한다는 것이다. 참고로, dojo 1.1.1 이후 버전에서는 CSS 형식과 자바스크립트 형식 둘 다 사용할 수 있으며, cssAttrName/Value 쌍을 배열로 지정할 수 있다. 예를 들면: dojo.style(domNode, { fontSize: '20pt', 'text-decoration': 'underline' });
• dojo.style(domNode, cssAttrName, cssAttrValue) : 지정한 DOM 노드의 스타일 중에서 지정한 CSS속성 값을 변경한다.

dojo.style()함수는 계산된 스타일(computed style)을 대상으로 한다. 즉, 캐스캐이드된 여러가지 CSS속성들이 모두 적용된 상태를 기준으로 값을 얻어오거나 변경한다.

dojo.*Class() - DOM CSS 클래스 관련 함수들
별거 아닌거 같지만 짱 편한 함수 몇 개 소개한다. 이런 짓 해보신 적 없으신가?

domNode.className = domNode.className + ' ' + 'newClass'; // 공백 주의!
domNode.className = domNode.className.replace('oldClass', ' ');

이게 중간 중간 공백 신경 쓰려면 열라 귀찮다. 아무튼 이런 닭질은 이젠 안녕이다.

• dojo.addClass(domNode, cssClassName) : 지정한 DOM 노드에 지정한 CSS 클래스를 추가한다. cssClassName에는 여러 개의 클래스 이름을 공백으로 구분하여 지정해도 된다.
• dojo.removeClass(domNode, cssClassName) : 지정한 DOM 노드에서 지정한 CSS 클래스를 제거한다. cssClassName에는 여러 개의 클래스 이름을 공백으로 구분하여 지정해도 된다.
• dojo.toggleClass(domNode, cssClassName) : 지정한 DOM 노드에서 지정한 CSS 클래스를 갖고 있으면 제거하고, 없으면 추가한다.
• dojo.hasClass(domNode, cssClassName) : 지정한 DOM 노드가 지정한 CSS 클래스를 갖고 있는지 확인한다.

dojo.attr()/dojo.style()/dojo.*Class()함수들은 dojo.query()와 함께 쓰면 더욱 편리하다. dojo.query에 대해서는 다음에 따로 알아보기로 하고, 예를 하나만 들어보면:

dojo.query('tr').forEach(
    function(node, i) {
        dojo.addClass(node, (i % 2) ? 'even' : 'odd');
    }
);

유틸리티 함수는 세 번으로 끝낼려고 했는데... 생각보다 길어졌다.

다음에 남은 유틸리티 함수들을 알아보고, 그 다음에 에니메이션 관련 함수들 알아보기로 하고... 오늘은 여기까지~