[jQuery] attr() 과 prop() 의 차이

.attr()

attribute 

html요소의 속성값을 다루며 값을 가져오거나 설정할때 사용하는 함수입니다.

주로 초기상태를 나타내며 동적인 상태변화를 정확하게 반영하지는 않습니다.

 

 

.prop()

 

property

html요소의 자바스크립트 객체 속성, 프로퍼티를 다룹니다.

동적인 상태변화, 수정된 요소의 값을 가져오는데 적합합니다.

 

예시

<input type="checkbox" id="myCheckbox" checked="checked">

<script>
  $(document).ready(function() {
    // 체크박스 상태 변경
    $('#myCheckbox').click(function() {
      console.log("attr('checked'): " + $('#myCheckbox').attr('checked'));
      console.log("prop('checked'): " + $('#myCheckbox').prop('checked'));
    });
  });
</script>

 

체크박스를 클릭할 때마다 attr('checked')와 prop('checked')의 값을 콘솔에 출력합니다.

 

 

처음 페이지를 로드할때는 체크박스가 체크되어 있습니다.

따라서 attr('checked')는 "checked"를 반환하고 (HTML 속성) / prop('checked')는 true를 반환합니다. (DOM 프로퍼티)

 

 

사용자가 체크를 해제하는 경우,

attr('checked')는 여전히 "checked"를 반환합니다. 왜냐하면 attr() 메서드는 HTML 초기 상태를 반영하기 때문입니다.

하지만 prop('checked')는 false를 반환합니다. prop() 메서드는 DOM의 현재 상태를 반영합니다.

 

결론,
동적으로 변경되는 요소의 상태를 처리할 때는 prop() 메서드를 사용하는 것이 더 적합하고
요소의 기본 HTML 속성 값을 읽어오고 싶을 때는 attr() 메서드가 유용합니다.
사용할 값의 상황에 맞게 적절한 메서드를 사용하면 됩니다.