[JS] jQuery, 속성 셀렉터 표현식(Attribute Selector Expressions)

jQuery 를 이용하면 여러 객체에 쉽게 접근이 가능한데, 폼 객체의 값들을 읽거나 설정하는데는 약간 헷갈리는 부분이 있습니다. 그건 각 폼 객체들이 약간씩 다른 동작을 하기 때문인데, 단순한 폼 뿐이라면 그냥 ID 를 지정하고 바로 접근하는게 아주 쉽고 빠릅니다.
하지만, 동일한 폼이 여러개 생긴다거나 동적으로 생성되거나 하는 경우 골치아파질 수 있습니다.

다행이도 jQuery 는 이런 접근을 아주 쉽게 도와줍니다. 바로 [ ] 표현식으로 쿼리를 지원하기 때문에 간단한 표현식으로 원하는 결과를 얻을 수 있는데, 폼 객체를 이를 이용해서 셀렉트 하는 방법이 있습니다.

<!-- 예제 HTML -->
<form id="TestForm">
    <input type="text" name="TestText" value="2010" />
    <input type="radio" name="TestRadio" value="1" checked="checked" />
    <input type="radio" name="TestRadio" value="2" />
</form>

여기서 Year 텍스트 필드의 값을 가져오고자 할때 아래와 같이 작성할 수 있습니다.

$("#TestForm > input[name='TestText']").val();

※ 참고로 #TestForm 옆의 > 는 해당 객체의 하위 객체를 의미하지만 적지 않아도 문제가 되진 않습니다. 단지, 공백만으로는 가독성이 떨어지기 때문에 구분을 위해 적었습니다.

INPUT 객체의 name 속성을 기준으로 해당 문자열에 맞는 객체를 가져오는 것이죠.
마찬가지로 라디오 객체의 값을 가져올때는 아래와 같이 작성할 수 있습니다.

$("#TestForm > input:radio[name="TestRadio"]:checked").val();// 결과: 1
$("#TestForm > input[name="TestRadio"]:checked").val();// 결과: 1

위의 두가지 모두 결과는 1 을 얻을 수 있습니다. 바로 [name='TestRadio'] 를 적었기 때문이죠. INPUT 객체의 name 속성이 맞는 객체를 가져오게되고, 그 중에서 현재 체크된 라디오 버튼의 value 를 돌려줍니다. (라디오 버튼은 그룹별로 같은 name 을 지정합니다.)

단지 이것뿐이라면 얼마나 유용할까? 하느 생각이 들 수 있습니다.
이게 다가 아니라 또 다른 기호를 통해 매칭되는 문자열을 찾아서 객체를 가져올 수 있습니다.

<!-- 예제 HTML -->
<form id="TestForm">
    <input type="text" name="TypeA" value="Type A" />
    <input type="text" name="TypeA_Desc_1" value="A1" />
    <input type="text" name="TypeA_Desc_2" value="A2" />
    <input type="text" name="TypeB" value="Type B" />
    <input type="text" name="TypeB_Desc_1" value="B1" />
    <input type="text" name="TypeB_Desc_2" value="B2" />
</form>

이와 같은 폼을 구성해야 할때 여러 폼들을 관리하는게 여간 힘든게 아닙니다.

만약, TypeA 인 항목들을 가져올때 아래와 같이 작성함으로써 쉽게 가져올 수 있습니다.

$("#TestForm > input[name^='TypeA']");

name 속성 중에서 TypeA 로 시작하는 객체들을 돌려주는 쿼리 입니다. name^= 에서 ^ 기호는 "~로 시작하는" 의미의 문자입니다.
반대로 어떤문자로 끝나는 이름이라면 name$= 으로 적으면 됩니다.

$("#TestForm > input[name$='Desc_1']");

이 쿼리는 Desc_1 로 끝나는 객체 2개를 반환합니다.

그러나 시작과 끝만으로는 유용성이 별로 없을지도 모르죠. 어떤 문자가 들어 있는 것을 모두 찾고 싶을때는 name*= 을 사용합니다.

$("#TestForm > input[name*='Desc']");

그럼 name 속성에 Desc 문자가 들어간 4개의 객체가 반환됩니다.
마찬가지로, name!= 으로 해당 문자열이 아닌 객체만 선택할 수 있습니다.

$("#TestForm > input[name!='TypeA']");

게다가 이러한 표현식은 name 속성에만 쓸 수 있는 것이 아니라, 객체의 속성 모두에 사용할 수 있습니다.

$("form[id='TestForm']");

따라서, 이것도 가능하다는 것이죠. (다만 의미가 없을뿐...;)

개발자가 직접 설정한 속성도 모두 적용 가능하기 때문에, 간단한 쿼리로 쉽게 원하는 객체를 찾을 수 있습니다. :)
[fin.]