jquery .attr() .prod() 차이

현재 운영 중인 시스템이 오래되다 보니 jquery를 정책상 사용하고 있지 않다. (물론 군데군데 쓰인 곳은 있음)

운영 정책을 지키는 편이어서 사용 안 하고 있었는데 얼마 전 jquery 기반 editor를 사용한 page 작업 중 뇌가 다시 쫀쫀해 졌다.

기존에 내가 알고 있던 속성에 대한 핸들링은 거의 .attr()을 사용하였다.

jquery 둘러보던 중에 .attr() .prod() 가 1.6버전부터 구분되어서 사용되고 있다는걸 이제 보았다. (반성하자,,,)

1.6 이전까지는 속성(attribute)과 프로퍼티(property)를 같이 사용하였지만 이후부터는 명시적으로 구분해서 사용한다.

Code	Description(return)
elem.checked	true (Boolean) Will change with checkbox state
$( elem ).prop( “checked” )	true (Boolean) Will change with checkbox state
elem.getAttribute( “checked” )	“checked” (String) Initial state of the checkbox; does not change
$( elem ).attr( “checked” ) (1.6)	“checked” (String) Initial state of the checkbox; does not change
$( elem ).attr( “checked” ) (1.6.1+)	“checked” (String) Will change with checkbox state
$( elem ).attr( “checked” ) (pre-1.6)	true (Boolean) Changed with checkbox state

1
2
3
4
5
6
7
8
9
10
11

<input type="checkbox" name="agreement" />
<a id="test" href="test2">주소</a>

<script type="text/javascript">
alert($('[name=agreement]').prop('checked')); // true or false
alert($('[name=agreement]').attr('checked')); // checked or undefined

var link = $('#test');
alert(link.attr('href')); // test2
alert(link.prop('href')); // http://localhost(절대주소)/test2
</script>

상위 코드 처럼 두개의 결과값은 다르게 나타난다.

이 두개의 메소드는 취급하는 정보가 다르다.

.attr()는HTML의 속성(attribute)을 .prop()는 JavaScript의 프로파티(property)를 취급하는 메소드이다.

그냥 “되네~!” 하고 넘어갔던 내용인데,,, 오늘도 다시 한번 반성하자.