아 오늘 드릴 말씀 또한 많은 분들이 알고 계신 내용이고 실제로 사용하고 계신 부분일 겁니다.

그럼 에도 불구 하고 글을 올리는 이유는 ..^^ 유용하기에 또는 이제 웹으로 전환 하는 분들중에 참고 하시라고

올려놓는 부분입니다. 실제로 UI 개발자가 생기고 늘어 가는 추세에서 저와 같이 중간에 끼인

UI 개발자도 아니고 그렇다고 서버단 개발자도 아닌 양쪽 모두를 조금씩 찌찔 되야 하는 입장에서는

이런 팁과 사용 방법이 너무나도 유익합니다. (저와 같은 분들이 있으리라 생각 합니다. 하하)

자 각설 하고 시작 해보도록 하겠습니다. 페이지를 개발 하다 보면 VIEW 단에 해당하는 jsp 페이지

에서는 if 스크립트릿 을 통한 극한의 하드 코딩들을 자주 접하게 됩니다.

물론 그렇게 개발 할수 밖에 없는 그 상황... 바로 그상황을 이해 못하는게 아니긴 하지만..

그 뒤처리를 하게된 소방수 입장에서는 아주 난감 하기 짝이 없습니다.

( 예 그렇습니다. 전 저게 무지 하게 싫습니다..  그래소 요즘 매일 DOM만 붙잡고 있습니다....

그래서 혹시나 하고 테스트를 해보았는데.. 아주 잘되는군요  :D )

그 if를 조금이라도 줄여 보기 위해 되도록이면 스크립트릿의 사용을 자제 하고 DOM을 이용한 처리를

택하게 되는데 오늘 말씀 드릴 부분이 바로 이 부분입니다.

저번 스터디 시간에 웹 표준에 대해서 공부를 하면서

getElementById, getElementsByName, getAttribute,  setAttribute 등을 배웠는데..

대부분의 분들이 앞에 2가지는 잘 쓰면서 뒤에 2개는 잘 안쓰는 경향이 있더라구요.

엄청나게 유용한 녀석들이니 저녀석들을 가지고 예제를 살펴 보겠습니다.

<div >
<a onclick=’fn_setSearchCtg(this)’ name=’search_large_ctg’ checkTag=’false’ dispCtgId=’"1 "’>상품1</a><br />
<a onclick=’fn_setSearchCtg(this)’ name=’search_large_ctg’ checkTag=’false’ dispCtgId=’" 2"’>상품2</a><br />
<a onclick=’fn_setSearchCtg(this)’ name=’search_large_ctg’ checkTag=’false’ dispCtgId=’" 3"’>상품3</a><br />
</div >

 위와 같은 상태에서 checkTag, dispCtgId 는 분명이 정식 태그는 아니지요? 그렇지 않습니까??
 그런데 DOM에서는 HTML을 하나의 문서로 바라보고  즉 태그를 문서로 바라 보고 있습니다. 그래서 저런식의
 임의의 태그를 지정해서 사용할수 있습니다.

그럼 위와 같이 처리 해서 얻을수 있는 장점은 무엇이냐??
음.. 생각하기나름에 따라 엄청나게 많은 처리를 할수있게 됩니다. 기존에 value 태그 하나만 가지고 값을 
판단할경우에는 하나의 id에 하나의 value만 매칭이 가능하기에 조건을을 써서 분기 해야할 문제가 생기면
태그 하나를 추가하므로써 조건문을 쓰지 않고도 처리가 가능해 지지요.
제가 작업 하는 페이지에서는 지금 말씀 드린경우를 적용을 한거구요.
제장 공간이 1개가 될수 밖에 없는 상황에서는 변칙적으로 hidden 인풋박스를 만들어서 지저분하게 처리 할수
밖에 없던것을 하나의 페이지에서 스크립트 많으로 처리가 가능 해진거죵.
응용여부는 개발자 수준에 따라 무궁무진해질수 있습니다. 상상력을 마구 가동해 보시고 본인이 처한 상황에 
맞게 응용해 보세요.
제 페이지에서 적용한 샘플 스크립트를 올려 놓으니 우리 즐겨 봅시다 :D HAVA Fun

<스크립트시작>
 function fn_setSearchCtg(obj){
  var a_list = document.getElementsByName("search_large_ctg");
  for(i=0; i<a_list.length; i++){
   if(a_list[i].getAttribute("checkTag") == "true"){
    a_list[i].setAttribute("checkTag", "false");
   }
  }
  obj.setAttribute("checkTag", "true");
  document.getElementById("choice_ctg_search").innerHTML = obj.innerHTML.substring(0,8);
  document.getElementById("ctg_largebox").style.display = ’none’;
 }

 function fn_getSearchCtg(){
  var a_list = document.getElementsByName("search_large_ctg");
  for(i=0; i<a_list.length; i++){
   if(a_list[i].getAttribute("checkTag") == "true"){
    return a_list[i].getAttribute("dispCtgId");
   }
  }
  return "";
 }
<스크립트끝>