[jQuery] attr(), prop() 차이점

jQuery1.6에서 attr()에서 하던 처리를 attr(), prop()로 나누었습니다. 원래는 따로 만들었어야 하는 기능이였지만 같이 사용하는 문제로 버그가 많아졌다고 합니다. javascript에서 attr()과 prop()는 다른 것이지만 jQuery 1.6 이전에는 .attr() 메서드가 일부 속성을 검색 할 때 속성 값을 고려하기 때문에 이를 같은 것 처럼 사용하고 있었습니다. 때문에 일관성없는 동작이 발생할 수 있었습니다. 

아래 이미지는 jQuery API Documentation 에서 찾은 결과입니다.

1. attr() 메서드

- HTML의 속성(attribute)을 취급합니다. 

- HTML으로서 기록되어 있는 속성의 내용(attribute 값)을 설정하거나 리턴(string 값)합니다. 

- 일치하는 요소 집합의 첫 번째 요소에 대한 속성 값을 가져 오거나 일치하는 모든 요소에 대해 하나 이상의 속성을 설정합니다.

- $(selector).attr(attribute)

- $(selector).attr(attribute, value)

- $(selector).attr(attribute, function(index, currentvalue)) 

- $(selector).attr({attribute:value, attribute:value, ...})

2. prop() 메서드

- javascript property를 취급한다.

- 선택된 요소의 속성과 값을 설정하거나 리턴합니다. 

- javascript의 property 값이 넘어오므로 boolean, date, function 등도 가져올 수 있습니다.

- 일치하는 요소 집합의 첫 번째 요소에 대한 속성 값을 가져 오거나 일치하는 모든 요소에 대해 하나 이상의 속성을 설정합니다.

- prop () 메소드는 속성 값 (예 : tagName, nodeName, defaultChecked와 같은 DOM 속성 또는 사용자 정의 만든 속성)을 검색하는 데 사용해야합니다.

- HTML 속성을 검색하려면 대신 attr () 메소드를 사용합니다.

- 속성을 제거하려면 removeProp () 메서드를 사용합니다 .

- $(selector).prop(property)

- $(selector).prop(property,value)

- $(selector).prop(property,function(index,currentvalue))

- $(selector).prop({property:value, property:value,...})

HTML 또는 이미 HTML 문서에서 생성 type된 input요소의 속성 (또는 특성) 을 변경하려고하면 Internet Explorer 6, 7 또는 8에서 오류가 발생합니다.

예를들어 체크박스의 checked의 값을 확인합니다. 

attr은 checked속성의 값을 표시하고 prop는 checked프로퍼티 값을 표시합니다.

결과 : checked, selected같은 값이 없는 속성의 기본값은 속성의 이름과 같기때문에 attr()의 경우에는 변하지 않는다. 즉, 체크상태를 판단해야할 경우 prop()를 사용해야 합니다. 

checked="checked"라는 attribute를 추가할때는 .attr('checked', 'checked'); 또는 .prop('checked', true);

checked상태를 제거할때는 .removeAttr('checked'); 또는 .prop('checked', false);

selected="selected"라는 attribute를 추가할때는 .attr('selected', 'selected'); 또는 .prop('selected', true); 

selected상태를 제거할때는 .removeAttr('selected'); 또는 .prop('selected', false);