Javascript .attr()과 .prop()의 차이점

jQuery 1.6버전 이전에는 attr() 만으로 가능하던 처리를 1.6 업데이트로 attr()과 prop() 으로 나뉘어졌다. JQuery UI 의 Dialog 에서 checkbox 에 대한 버그가 존재했다. checkbox 의 체크를 없을 때에는 상관이 없으나, 체크를 다시 할 때 체크가 되지 않는 문제가 (특정조건에서) 발생했다.

.attr()과 .prop()는 무엇이 다른가?

• .attr()는 HTML의 속성을 취급 
• .prop()는 JavaScript 프로파티을 취급

실제로 속성이란 무엇입니까? 

 속성은 HTML 요소에 대한 추가 정보를 전달하며 name = "value"쌍으로 제공됩니다. HTML 요소의 속성을 설정하고 소스 코드를 작성하는 동안 HTML 요소를 정의 할 수 있습니다. 간단한 예제는 다음과 같습니다.

<input id="hanq" type="text" value="java"/>

여기서 "type", "value", "id"는 입력 요소의 속성입니다.

프로퍼티란 무엇입니까?

프로퍼티는 HTML DOM 트리의 특성을 나타냅니다. 일단 브라우저가 사용자의 HTML 코드를 파싱하면 해당 DOM 노드가 생성되어 객체가되므로 프로퍼티가 있습니다. 위의 경우 브라우저가 입력을 렌더링하면 align, alt, autofocus, baseURI 등의 다른 속성이 추가됩니다.
이후 attr()은 html 페이지에서 정의한대로의 요소의 값을 제공합니다. 하지만 attr()은 요소의 현재 상태의 원래 값을 제공하므로 javascript / jquery를 통해 수정 된 요소의 값을 가져 오는 데 prop()를 사용하는 것이 좋습니다.

예제 모음

Style

<input style="font:arial;"/>

• .attr('style') - 일치 된 요소에 대한 인라인 스타일을 반환합니다. "font:arial;" 
• .prop('style') - 스타일 선언 객체를 반환합니다. CSSStyleDeclaration

Value

<input value="hello" type="text"/>   

$('input').prop('value', 'i changed the value');

• .attr('value')   - 'hello' 반환
• .prop('value') - 'i changed the value' 반환
• 하지만 value를 getter/setting 하기에는 .val() 메서드를 권장

CheckBox

.prop()가 선호되는 위치표 (.attr()도 여전히 사용 가능)

요약

• attr() - HTML attribute 값이 모두 String 으로 넘어옴 
•  prop() - 자바스크립트의 프로퍼티 값이 넘어오기 때문에 boolean, date, function 등도 가져올 수 있음
• .prop()는 .attr() 보다 약 2.5 배 빠름

---

참고한 사이트 

• jQuery document