jQuery attr()와 prop()의 차이점

jQuery의 attr()와 prop() 메서드란?

▶ jQuery는 HTML 요소의 속성(attribute)과 속성(property)을 조작하기 위한 다양한 메서드를 제공합니다. 그 중에서도 자주 사용되는 메서드가 바로 attr()와 prop()입니다. 이 두 메서드는 비슷해 보이지만, 중요한 차이점이 있습니다. 아래에서 자세히 살펴보도록 하겠습니다.

attr() 메서드

• attr() 메서드는 HTML 요소의 속성(attribute)을 가져오거나 설정할 때 사용됩니다.
• HTML 마크업에 정의된 속성 값을 다루며, 문자열 값을 반환합니다.

attr() 메서드 사용 예시

1. 속성 값 가져오기

// href 속성 값을 가져옵니다.
var href = $("a").attr("href");
console.log(href); // 출력: "https://example.com"

1. 속성 값 설정하기

// href 속성 값을 설정합니다.
$("a").attr("href", "https://new-url.com");

prop() 메서드

• prop() 메서드는 HTML 요소의 속성(property)을 가져오거나 설정할 때 사용됩니다.
• DOM 요소의 프로퍼티를 다루며, 속성 값이 아닌 실제 객체나 불리언 값을 반환합니다.

prop() 메서드 사용 예시

1. 프로퍼티 값 가져오기

// checked 프로퍼티 값을 가져옵니다.
var isChecked = $('input[type="checkbox"]').prop("checked");
console.log(isChecked); // 출력: true 또는 false

1. 프로퍼티 값 설정하기

// checked 프로퍼티 값을 설정합니다.
$('input[type="checkbox"]').prop("checked", true);

attr()와 prop()의 차이점

1. 사용 목적

   • attr(): HTML 마크업에 정의된 속성(attribute)을 가져오거나 설정할 때 사용됩니다. 예를 들어, href, src, id와 같은 속성을 다룹니다.
   • prop(): DOM 요소의 프로퍼티(property)를 가져오거나 설정할 때 사용됩니다. 예를 들어, checked, selected, disabled와 같은 프로퍼티를 다룹니다.

2. 반환 값의 유형

   • attr(): 문자열 값을 반환합니다. 이는 HTML 속성의 원래 값을 나타냅니다.
   • prop(): 불리언 값이나 객체를 반환합니다. 이는 실제 DOM 프로퍼티의 현재 상태를 나타냅니다.

3. DOM 상태와의 연관성

   • attr(): HTML 마크업에 정의된 속성 값을 다룹니다. 따라서 DOM 상태와 직접적으로 연관되지 않을 수 있습니다.
   • prop(): DOM 요소의 현재 상태를 다룹니다. 따라서 현재 DOM 상태와 직접적으로 연관되어 있습니다.

4. 사용 예시

   • attr(): 이미지의 src 속성, 링크의 href 속성 등을 다룰 때 유용합니다.
   • prop(): 체크박스의 checked 상태, 옵션의 selected 상태 등을 다룰 때 유용합니다.

예시를 통한 차이점 이해

1. 체크박스의 체크 상태

// HTML: <input type="checkbox" id="myCheckbox" checked>
var checkbox = $("#myCheckbox");

// attr()을 사용하여 checked 속성을 가져옵니다.
var attrChecked = checkbox.attr("checked");
console.log(attrChecked); // 출력: "checked"

// prop()을 사용하여 checked 프로퍼티를 가져옵니다.
var propChecked = checkbox.prop("checked");
console.log(propChecked); // 출력: true

• attr('checked')는 HTML 마크업에 정의된 속성 값을 가져오며, 이는 문자열로 반환됩니다.
• prop('checked')는 DOM 요소의 실제 체크 상태를 가져오며, 이는 불리언 값으로 반환됩니다.

1. 비활성화된 버튼

// HTML: <button id="myButton" disabled>Click me</button>
var button = $("#myButton");

// attr()을 사용하여 disabled 속성을 가져옵니다.
var attrDisabled = button.attr("disabled");
console.log(attrDisabled); // 출력: "disabled"

// prop()을 사용하여 disabled 프로퍼티를 가져옵니다.
var propDisabled = button.prop("disabled");
console.log(propDisabled); // 출력: true

• attr('disabled')는 HTML 마크업에 정의된 속성 값을 가져오며, 이는 문자열로 반환됩니다.
• prop('disabled')는 DOM 요소의 실제 비활성화 상태를 가져오며, 이는 불리언 값으로 반환됩니다.

결론

▶ attr()와 prop() 메서드는 각각 속성과 프로퍼티를 다루는 데 사용되며, 그 용도와 반환 값의 유형에서 차이가 있습니다.
속성을 다룰 때는 attr()를, 프로퍼티를 다룰 때는 prop()를 사용하는 것이 적절합니다. 이를 통해 HTML 요소의 상태를 정확하게 제어하고 관리할 수 있습니다.

이렇게 오늘은 jQuery의 attr()와 prop() 메서드의 차이점에 대해 알아봤는데요,
각 메서드의 특성과 용도를 잘 이해하고 활용하면, jQuery를 더욱 효과적으로 사용할 수 있을 것입니다. 그렇다면 저는 다음에 또 다른 유익한 내용을 들고 오도록 하겠습니다 😁!