남아 있는 유틸리티 함수들 중에서 정말 자주 쓰이는 몇가지만 더 알아보자.
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.style() - DOM CSS 속성 관련 함수들
dojo.style()도 getter/setter 두가지 역할을 겸하고 있으며, domNode 대신 해당 노드의 id를 문자열로 지정해도 된다.
dojo.*Class() - DOM CSS 클래스 관련 함수들
별거 아닌거 같지만 짱 편한 함수 몇 개 소개한다. 이런 짓 해보신 적 없으신가?
이게 중간 중간 공백 신경 쓰려면 열라 귀찮다. 아무튼 이런 닭질은 이젠 안녕이다.
유틸리티 함수는 세 번으로 끝낼려고 했는데... 생각보다 길어졌다.
다음에 남은 유틸리티 함수들을 알아보고, 그 다음에 에니메이션 관련 함수들 알아보기로 하고... 오늘은 여기까지~
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)와 비슷하다.
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.*Class() - DOM CSS 클래스 관련 함수들
별거 아닌거 같지만 짱 편한 함수 몇 개 소개한다. 이런 짓 해보신 적 없으신가?
domNode.className = domNode.className + ' ' + 'newClass'; // 공백 주의!
domNode.className = domNode.className.replace('oldClass', ' ');
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.query('tr').forEach(
function(node, i) {
dojo.addClass(node, (i % 2) ? 'even' : 'odd');
}
);
function(node, i) {
dojo.addClass(node, (i % 2) ? 'even' : 'odd');
}
);
유틸리티 함수는 세 번으로 끝낼려고 했는데... 생각보다 길어졌다.
다음에 남은 유틸리티 함수들을 알아보고, 그 다음에 에니메이션 관련 함수들 알아보기로 하고... 오늘은 여기까지~
'hacking > web' 카테고리의 다른 글
| Ajax 성능 도구 (0) | 2008/07/30 |
|---|---|
| dojo by example(4) - 유틸리티 함수 (0) | 2008/07/29 |
| dojo by example(3) - 유틸리티 함수 (2) | 2008/07/24 |
| 웹 프로젝트에서 jslint로 자바스크립트 검증하기: maven 또는 ant (0) | 2008/07/20 |
| dojo by example(2) - 유틸리티 함수 (2) | 2008/07/19 |
| dojo by example(1) - 유틸리티 함수 (0) | 2008/07/13 |
