.attr( ) vs .prop( )

 My DRAMA | 똥광이
 http://blog.naver.com/silver889/220349240582

.attr( ) vs .prop( )

이미 관련해서 많은 글들이 있기에 제가 이해한대로 적어보려고 합니다.큰 틀에서부터 차이점을 나누면.attr( ) : HTML의 attribute(속성)를 ...

My DRAMA

이미 관련해서 많은 글들이 있기에 제가 이해한대로 적어보려고 합니다.

큰 틀에서부터 차이점을 나누면

.attr( ) : HTML의 attribute(속성)를 취급

.prop( ) : Javascript의 property(속성)을 취급 합니다..

보통 어트리뷰티나 프로퍼티를 한글로 표현할때는 '속성'이란 말로 부르기때문에 조금 헷갈리는것 같습니다.

아래는 예제입니다.

 

<a id="to_comments" href="#comments"></a>
 
var $link = $("#to_comments");
console.log($link.attr('href')); // #comments
console.log($link.prop('href')); // http://localhost:63342/test/test.html#comments

 

<input id="private" type="checkbox" checked></input>
 
var $checkbox = $("#private");
console.log($checkbox.attr('checked')); // checked
console.log($checkbox.prop('checked')); // true
 

 

<div id="fun" onclick="clickFuncion()"></div>
 
var $fun = $("#fun");
console.log($fun.attr('onclick')); // clickFuncion()
console.log($fun.prop('onclick')); // function onclick(event) { clickFuncion() }

예제와 같이 같은 요소들을 셀렉해서 .attr( )과 .prop( )를 살펴보면.

.attr( )은 HTML이 가지고 있는 attrbute text를 return 해준다는것을 알 수 있고,

.prop( )는 그 속성의 실제 의미하는 값을 return 해준다는 것을 알 수 있습니다.

참고 : http://javascriptandjquerydev.blogspot.kr/2012/07/attr-prop.html

http://hellogk.tistory.com/96

http://blog.devenjoy.com/?p=93

[출처] .attr( ) vs .prop( )|작성자 똥광이