jQuery Attributes vs. Properties

이번에 오랜만에 checkbox를 수정하는 스크립트를 만들어야해서 작업하다보니 attr이 안먹는다. 아래는 기존에 사용하던 방법이다.

$('#testCheckbox').attr('checked', true);

이게 jqeury 1.6 이후부터는 attribute와 property가 분리되어서 다르게 된다고 한다. 얼마전까지 1.4.4를 사용했었으므로 몰랐다. 버젼업되면 꼼꼼히 확인해야겠다. 느닷없이 안되서 좀 당황스러웠다. 요즘에는 selecter를 이용해서 값을 가져왔기 때문에 attr로 checked를 가져오지 않아서 몰랐다. 참고로 selecter로 가져오면 다음과 같다.

$('input:checkbox[id=testCheckbox]:checked')

checked가 되어 있으면 객체를 가져오고 선택이 되있지 않으면 객체를 가져오지 않는다. 하지만 이제는 값을 수정해야하므로 분리되어 나온 것이 prop이다. 위에 안되는 소스를 바꾸면 다음과 같다.

$('#testCheckbox').prop('checked', true);

attr에서 prop으로 함수명이 바뀐 것이 전부다. 인터넷을 보면 차이점에 대해 이래저래 말들이 많다. 그런데 뭐 잘 모르겠다. 두 함수를 다시 이전 사용법으로 테스트를 해보자. 좀 더 알기 쉽게 크롬에서 개발자 툴에 있는 Elements 탭의 tag를 보자. 

attr 함수로 값을 수정하면 크롬의 Elements 탭에서 보이는 소스가 바뀐다. Tag에 checked="checked" 라는 문구가 추가되어 있을 것이다. 이제 prop을 이용해서 적용을 해보자. tag 상의 변화는 없다. 가져올 경우에도 각각 값을 가져온다.이것으로 봐서 attr은 html tag에 바로 적용되는 것으로 작용하고 있다. 그리고 prop은 눈으로는 확인이 불가능하다. 또 jquery 문서에 보니 prop의 반환 자료형이 boolean이다. 그러므로 true, false 두가지 값 만으로 사용할 수 있겠다. attr은 속성의 정의를 말하고 prop은 tag에 관계된 원소라고 보면 될거 같다. 비슷한 구조인 disabled도 prop으로 정의하면 된다.

정리해보면 attr은 html DOM 구조에 바로 적용되어지는 것이고 prop은 boolean 자료형을 갖는 Tag의 원소이다. w3schools사이트에서 찾아보니 attr로 정의하는 것은 attribute라고 되어 있고 prop으로 정의하는 것은 elements라고 되어있다. 좀 더 깊게 찾아보고 싶지만, 너무 깊게 들어가면 해볼 것이 많아져서 여기까지로 결론을 내려야겠다.

참고

http://api.jquery.com/prop/

http://www.w3schools.com/jquery/jquery_ref_selectors.asp