[jQuery] prop() 메서드 vs attr() 메서드

jQuery에서 prop() 메서드와 attr() 메서드는 이름으로부터 유추할 수 있듯이, 각각 property와 attribute을 가져오거나 변경합니다. property와 attribute는 둘 다 "속성"으로 번역이 될 수 있는데, 의미하는 바는 다릅니다.

 

property의 경우, 자바스크립트의 관점에서의 속성을 뜻합니다. 버튼의 disabled 여부, 체크박스가 체크되었는지 등이 그 예시입니다. 즉, HTML 코드에서는 보이지 않는 요소의 상태와 관련된 역할을 합니다. 자바스크립트의 관점이기 때문에, property의 변경은 주로 페이지의 내부 동작을 변경하는 것입니다. 따라서 prop() 메서드는 주로 불리언 값을 다루게 됩니다.

let isChecked = $('#ex_checkbox').prop('checked'); // Get the current property
$('#ex_checkbox').prop('checked', true); // Change the property

 

attribute의 경우, HTML의 관점에서의 속성을 뜻합니다. a 태그의 href 속성 값, 지정된 클래스/ID 값 등이 그 예시입니다. 즉, HTML 코드에서 구체적으로 명시된 속성 값과 관련된 역할을 합니다. HTML의 관점이기 때문에, attribute의 변경은 페이지의 외관을 변경하게 됩니다. attr() 메서드는 주로 문자열 값을 다루게 됩니다. 

 

let href = $('$ex_link').attr('href');
$('#ex_link').attr('href', 'https://www.naver.com/')