.prop(propertyName)
요약
선택된 엘리먼트 그룹 중 첫번째 엘리먼트의 속성(property)를 반환한다.
문법
.prop(propertyName)
인자
| 인자명 | 데이터형 | 필수/옵션 | 설명 |
|---|---|---|---|
| propertyName | String | 필수 | 구하려는 속성의 이름 |
버전
1.6
반환값
String
설명
.prop() 메서드는 선택된 엘리먼트 그룹에서 첫번째 엘리먼트의 속성값만을 구한다. 선택된 엘리먼트 그룹내에 엘리먼트가 없거나 속성의 값이 설정되어 있지 않으면, 이 메서드는'undefined'값을 반환한다. 선택된 그룹내의 모든 엘리먼트에 대해서 각각 값을 구하려면, jQuery의 .each()나 .map() 등의 메서드를 이용한 순환문을 사용하면 된다.
중요 : attribue나 property나 한국어로는 '속성'으로 번역 되지만 이 둘은 다르다. attribute는 HTML 코드 상에서 속성의 값을 의미하고, property는 DOM에서 사용하는 엘리먼트의 속성이다. 본 문서에서는 attribute와 property를 구분하기 위해서 일부러 이 단어들을 영문 그대로 사용했다.
몇몇 특정한 상황에서는 attributes와 properties간의 차이점이 중요할 수도 있다. jQuery 1.6 이전 버전에서는 attributes를 구하려고 할 때 .attr() 메서드가 property의 값을 구하기도 하였다. 이렇게 하면 프로그램이 일관성을 잃는 경우가 발생할 수 있다. jQuery 1.6버전의 경우, .prop() 메서드를 사용하면 명시적으로 프로퍼티(property)값을 구할 수 있다. 그리고 attributes 값을 구하려는 경우에는 .attr() 를 사용하면 된다.
예를 들어, selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, defaultSelected 등의 값을 구하거나 값을 설정할 때에는 .prop() 메서드를 사용해야 한다. jQuery 1.6 이전 버전에서는 .attr() 메서드로 위에서 말한 프로퍼티(property)의 값을 구할 수 있었다. 그러나 이 프로퍼티들은 attr의 영역 안에 있지 않다. 다시 말해서 HTML 코드 상에서 기술되지 않는다는 말이다. 이를테면 다음과 같은 HTML에 다음과 같이 select 엘리먼트에 attribute로 selectedIndex는 없다.
<select selectedIndex="1" id="selectElm">
selectedIndex는 DOM의 property이고 아래와 같은 방법으로 접근할 수 있다.
document.getElementById('selectElm').selectedIndex
위와 같은 경우 jQuery에서는 .attr('selectedIndex')를 쓰면 안되고, .prop('selectedIndex')를 써야 한다.
그 결과 값이 불린(Boolean)인 Attribute에 대해서 생각해보자. 아래와 같이 type이 checkbox인 input 엘리먼트는 checked라는 Attribute를 가지고 있다. 일반적으로 HTML 코드 상에서 checkbox의 체크를 활성화 하려면 checked attribute의 값을 checked로 한다.
<input type="checkbox" checked="checked" id="elem" />
그런데 checked 의 DOM property의 결과 값은 true/false를 리턴한다.
document.getElementById('elem').checked // true
이를 jQuery에서 실행하면 아래와 같이 된다.
$('#elem').attr('checked'); // 문자열 chekced를 리턴
$('#elem').prop('checked'); // true를 리턴
위의 관계는 jQuery의 버전에 따라서 좀 더 복잡한 경우의 수가 있는데 이를 표로 나타내면 아래와 같다.
| elem.checked | true(boolean), 체크박스의 상태에 따라서 값이 변함 |
| $(elem).prop('checked') | true(boolean), 체크박스의 상태에 따라서 값이 변함 |
| elem.getAttribute('checked') | checked(String), 체크박스의 초기값, 체크박스의 상태가 변경되도 이 값은 변하지 않음 |
| $(elem).attr('checked') ver 1.6 | checked(String), 체크박스의 초기값, 체크박스의 상태가 변경되도 이 값은 변하지 않음 |
| $(elem).attr('checked') ver 1.6.1 이상 | checked(String), 체크박스의 상태에 따라서 값이 변함 |
| $(elem).attr('checked') ver 1.6 미만 | true(boolean), 체크박스의 상태에 따라서 값이 변함 |
W3C의 입력폼(forms) 명세에 따르면 체크된 attribute는 불린 attribute이다. 이는 이 attribute가 존재하는 경우, 즉 attribute가 값이 없거나 비어있는 문자열 값을 갖고 있는 경우에는, attribute에 대응하는 속성값이 참(true)값임을 의미한다. 여러 종류의 브라우저에서 체크박스가 체크표시 되었는지 확인하려고 할 때에는 다음과 같은 방법이 선호된다. 엘리먼트의 프로퍼티 상에서 다음 중 하나를 사용하여 "truthy" 값을 확인하는 것이다.
-
if ( elem.checked ) -
if ( $(elem).prop("checked") ) -
if ( $(elem).is(":checked") )
jQuery 1.6버전을 사용하고 있다면, if ( $(elem).attr("checked") ) 라고 작성한 코드는 content attribute를 구할 것이고, 체크박스가 체크되거나 체크해제 되어도 이 값은 변하지 않을 것이다. 이 attribute는 체크된 프로퍼티의 기본값이나 초기의 값을 저장하는 기능만 있기 때문이다. 이 부분은 하위호환성을 유지하기 위해서 1.6.1에서도 1.6과 동일하게 .attr('checked')의 값으로 attribute 값을 반환하면서, 체크박스의 상태의 변화가 반영된 결과를 리턴하도록 개선하였다. 하지만 1.6 이전 버전들이 그렇듯이 .attr('checked')의 값이 boolean을 리턴하기를 원한다면 .prop로 메소드를 교체해야 한다. 하지만, 체크된 값을 구하는 방법으로 선호되는 것은 위의 표에서 나열한 옵션 중에서 하나를 사용하는 것이다. 이것이 최신 버전의 jQuery에서 어떻게 작동하는지 알려면, 아래의 예제에서 체크박스에 체크를 하거나 체크를 해제해 보라.
추가 메모
인터넷 익스플로러 9 이전 버전에서는 문서에서 DOM 엘리먼트가 제거되기 전에 .removeProp()을 사용하여 프로퍼티를 제거하지 않으면, DOM 엘리먼트의 속성값을 수나, 문자열, 불린 값 등이 아닌 간단하지 않은 값으로 설정하려고 .prop() 메서드를 사용할 때 메모리 누수가 발생할 수 있다.
예제
<!DOCTYPE html>
<html>
<head>
<style>
p { margin: 20px 0 0 }
b { color: blue; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<input id="check1" type="checkbox" checked="checked">
<label for="check1">Check me</label>
<p></p>
<script>
$("input").change(function() {
var $input = $(this);
$("p").html(".attr('checked'): <b>" + $input.attr('checked') + "</b><br>"
+ ".prop('checked'): <b>" + $input.prop('checked') + "</b><br>"
+ ".is(':checked'): <b>" + $input.is(':checked') ) + "</b>";
}).change();
</script>
</body>
</html>
.prop(propertyName, value)
요약
선택된 엘리먼트 그룹 전체의 property를 변경한다.
.prop() 메서드는 프로퍼티의 값을 설정하는 편리한 방법이다. 특히 함수가 반환한 여러 개의 프로퍼티의 값을 한번에 설정하거나 한 번에 여러 개의 엘리먼트에 대해서 값을 설정할 때에 편리하다. selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, defaultSelected의 값을 설정할 때에는 .prop() 메서드를 사용해야 한다. jQuery 1.6 이후 버전부터 위에서 나열한 프로퍼티는 더 이상 .attr() 메서드를 사용해서 값을 설정할 수 없다. 이 프로퍼티는 attribute가 아니고 property이다. 이에 대한 자세한 내용은 .prop(propertyName)을 참고하자.
property 보통 DOM 엘리먼트의 상태만을 동적으로 변경하고,HTML 코드 자체는 변경하지 않는다. 예를들면 input 엘리먼트의 value 속성이나, button엘리먼트의 disabled 속성, 체크박스의 checked 속성이 그렇다. 따라서 property를 변경할 때는 .attr 대신 .prop를 사용해야 하며 value 속성을 변경하거나, 값을 획득할 때는 .val() 메소드를 사용해야 한다.
$("input").prop("disabled", false);
$("input").prop("checked", true);
$("input").val("someValue");
중요: 이 프로퍼티의 값을 거짓(false)로 설정할 때에 .removeProp() 메서드를 사용하면 안된다. 한번 native 프로퍼티가 제거되면, 다시 추가할수 없다. 더욱 자세한 내용은 .removeProp() 메서드에 관한 설명을 참고하라.
프로퍼티의 값 계산하기 (Computed property values)
.prop(propertyName, function)의 두번째 인자로 함수를 사용하면, 보다 디테일한 설정을 할 수 있다.예를 들어, 체크박스들을 모두 확인해서 그 값에 따라 체크박스를 토글하려면 다음과 같이 하면 된다:
$("input[type='checkbox']").prop("checked", function( i, val ) {
return !val;
});
추가메모: 인터넷 익스플로러 9 이전 버전에서는 문서에서 DOM 엘리먼트가 제거되기 전에 .removeProp()을 사용하여 프로퍼티를 제거하지 않으면, DOM 엘리먼트의 속성값을 수나, 문자열, 불린 값 등이 아닌 간단하지 않은 값으로 설정하려고 .prop() 메서드를 사용할 때 메모리 누수가 발생할 수 있다. 메모리 누수현상 없이 DOM 객체에 안전하게 값을 지정하려면 .data() 메서드를 사용하라.
<!DOCTYPE html>
<html>
<head>
<style>
img { padding:10px; }
div { color:red; font-size:24px; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<input type="checkbox" checked="checked" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" checked="checked" />
<script>
$("input[type='checkbox']").prop({
disabled: true
});
</script>
</body>
</html>
