Outsider's Dev Story

Stay Hungry. Stay Foolish. Don't Be Satisfied.
RetroTech 팟캐스트 44BITS 팟캐스트

script.aculo.us의 Builder 사용하기

자바스크립트 질을 하다보면 동적으로 HTML 엘리먼트를 생성해야 하는 경우가 있는데 이럴 경우에 innerHTML을 이용하는 방법과 DOM 스크립트를 이용하는 방법이 있다. innerHTML은 어떤 엘리먼트 안의 내용을 바꾸어 주는 것인데 스트링형태로 HTML코드를 직접 넣는 형태를 취하기 때문에 간단한 것은 편하지만 복잡한 구조의 엘리먼트 생성에는 적합하지가 없다. DOM 스크립팅은 appenChlild(), createElement()같은 메서드를 이용해서 엘리먼트를 추가/삭제하는 것인데 사용하기가 만만치 않다.

때문에 스크립타큘러스에서는 HTML 앨리먼트 생성을 위해서 Builder라는 클래스를 제공하고 있다. 스크립타큘러스의 Wiki를 보면 다음과 같이 정의되어 있다.

Builder.node( elementName )
Builder.node( elementName, attributes )
Builder.node( elementName, children )
Builder.node( elementName, attributes, children )

같은 함수명으로 4가지로 오버라이딩이 되어 있다. 필요한대로 사용하면 된다.

Builder.node()를 사용하려면 상단에 아래처럼
<script type="text/javascript" src="scriptaculous.js?load=builder"></script>
builder.js를 로드해야 한다.



var elem = Builder.node('div', {id:'test', name:'test', className:'layout'});
=> <div id="test" name="test" class="layout"></div>

var elem = Builder.node('img', {src:'/banner.gif', alt:'광고', onclick:'move();'});
=> <img src="/banner.gif" alt="광고" onclick="move();" />

var span = Builder.node('span', '텍스트 내용...');
=> <span>텍스트 내용...</span>


텍스트의 경우는 children이라고 생각하면 된다. 실제로 DOM서치를 하여도 그렇게 나오는거고. {}으로 사용하는 옵션에는 엘리먼트의 어트리뷰트를 그냥 써주면 된다. 몇번 해보면 따로 분석할 필요가 없을정도로 직관적이다. 다만 class는 className이라고 써주어야 한다는 것 외에는....




위처럼 간단한 경우야 innerHTML을 사용해도 되지만 실제 사용하면 훨씬 복잡한 경우가 자식이 있을 경우에는 아래와 같이 사용한다.

var elem = Builder.node('div', {id:'test', name:'test', className:'layout'},
                    Builder.node('div', {className:'innerStyle'}, '텍스트 내용')
               );
=> <div id="test" name="test" class="layout>
          <div class="innerStyle">텍스트 내용</div>
     </div>


TEXT를 집어 넣을때처런 children 위치에 Builder.noder()를 다시 삽입해 주면 된다. 이런식으로 삽입하면 복잡한 DOM도 직관적으로 만들어 낼 수 있다.



자식이 여러개일 경우는 배열([])을 사용한다.

var elem = Builder.node('div', {id:'test', name:'test', className:'layout'},
                     Builder.node('ul', {className:'ulstyle'},  [
                          Builder.node('li', '목록1'),
                          Builder.node('li', '목록2'),
                          Builder.node('li', '목록3'),
                          Builder.node('li', '목록4'),
                          Builder.node('li', '목록5'),
                     ])
                );
=> <div id="test" name="test" class="layout>
         <ul class="ulstyle">
               <li>목록1</li>
               <li>목록2</li>
               <li>목록3</li>
               <li>목록4</li>
               <li>목록5</li>
          </ul>
    </div>


한개일때는 그냥 사용해도 되지만 같은 레벨의 자식이 여러개인 경우에는 배열을 이용해서 추가해 주면 된다.

다 만들고 나면 일반적인 방법을 이용해서 만든 객체를 원하는 위치에 삽입해 주면 된다.

$("targetDivision").appenChlild(elem);
$("targetDivision").update(elem);
$("targetDivision").insert(elem);

삽입할 때는 원하는대로 사용이 가능하다.
2008/10/27 23:06 2008/10/27 23:06