[jQuery] attr() 와 prop() 의 차이점 - 속성과 프로퍼티

 

attr() 와 prop() 의 차이점

 jQuery 1.6 이후 부터 .attr() 함수가 용도에 따라 .attr() 과 .prop() 으로 분리 되었다.

 

.attr() : html 의 속성(attribute)을 다룬다.

.prop() : javascript 프로퍼티(property)를 다룬다.

 

[예 1]

<a id="get_comment" href="#comments">코멘트</a>

var $comment = $('#get_comments');

alert($comment.attr('href')); // href 속성 값을 표시

alert($comment.prop('href')); // href 프로퍼티 값을 표시

위 예제1 에서 alert 결과

alert 의 .attr() 값은 "#comments"

alert 의 .prop() 값은 "http://test.com/path/page#comments" 가 된다.

---

[예 2]

<checkbox id="agree" type="checkbox" checked />

var $checkbox = $('#agree');

alert($checkbox.attr('checked')); // checked 속성 값을 표시

alert($checkbvox.prop('checked')); // checked 프로퍼티 값을 표시

위 예제 2 에서

3번 alert 의 .attr() 값은 "checked"

4번 alert 의 .prop() 값은 "true" 가 된다.

 

attr()	prop()
HTML 의 속성(attribute)을 취급	JavaScript의 프로퍼티(property)를 취급
속성은 HTML Element에 있는 정보	프로퍼티는 JavaScript에서 사용하는 정보 (HTML의 정보와 일치 또는 불일치)

attr() 사용시 
ㆍ HTML attribute 값이 모두 String 으로 넘어옴

prop() 사용시 
ㆍ 자바스크립트의 프로퍼티 값이 넘어오기 때문에 boolean, date, function 등도 가져올 수 있음 

 

html 에 쓴 속성 값을 다루고 싶을때는 .attr() 함수를 사용하고,

그 외에 javascript 의 프로퍼티 값을 사용할 경우는 .prop() 함수를 사용하면 된다.

 

출처 : https://devlogofchris.tistory.com/58