자바스크립트 .attr()과 .prop()에 대한 모든 것

 

 

JavaScript를 활용한 DOM 조작에서 jQuery의 .attr()과 .prop() 메서드는 매우 자주 사용됩니다. 그러나 둘의 차이를 명확히 이해하지 못하면 코드가 의도와 다르게 동작할 수 있습니다.

---

1. .attr()이란?

attr() 메서드는 HTML 요소의 속성(attribute) 값을 가져오거나 설정할 때 사용됩니다. HTML 태그에 정의된 속성을 기반으로 동작합니다.

기본 사용법

// 속성 값 가져오기
let hrefValue = $("a").attr("href");

// 속성 값 설정하기
$("img").attr("alt", "대체 텍스트");

특징

• HTML 코드에 정의된 속성 값을 기반으로 함.
• 동적으로 변경된 속성값은 업데이트되지 않을 수 있음.

예제

Example

$("#link").attr("href"); // "https://example.com"

---

2. .prop()이란?

prop() 메서드는 DOM 요소의 프로퍼티(property) 값을 가져오거나 설정할 때 사용됩니다. 프로퍼티는 자바스크립트 객체로 표현되는 동적인 값입니다.

기본 사용법

// 프로퍼티 값 가져오기
let isChecked = $("input[type='checkbox']").prop("checked");

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

특징

• DOM 요소의 현재 상태를 기반으로 함.
• 동적으로 변경된 값도 항상 최신 상태로 반영됨.

예제

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

$("#checkbox").prop("checked"); // true

---

3. .attr()과 .prop()의 차이점

구분	.attr()	.prop()
대상	HTML 속성(Attribute)	DOM 프로퍼티(Property)
동적 상태 반영 여부	반영되지 않을 수 있음	항상 최신 상태 반영
주요 사용 예	HTML 정의 속성 읽기/설정	요소의 상태 값 읽기/설정

예제 비교

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

// attr() 사용
$("#example").attr("checked"); // "checked"

// prop() 사용
$("#example").prop("checked"); // true

// 체크박스 상태 변경 후
$("#example").prop("checked", false);

$("#example").attr("checked"); // 여전히 "checked"
$("#example").prop("checked"); // false

---

4. 어떤 상황에서 어떤 메서드를 사용할까?

.attr() 사용해야 하는 경우

• HTML 속성을 읽거나 수정해야 할 때
• 요소에 사용자 정의 속성(custom attribute)을 추가하거나 관리할 때

.prop() 사용해야 하는 경우

• DOM 요소의 동적 상태를 확인하거나 제어할 때
• 체크박스, 라디오 버튼, 선택된 옵션 등 상태 기반 요소를 조작할 때

---

 

 

• .attr()은 HTML 속성을 다루는 데 적합하며, .prop()은 DOM 요소의 동적 상태를 조작하는 데 적합합니다.
• 항상 현재 상태를 확인하거나 조작해야 한다면 .prop()을 사용하세요.
• 사용자 정의 속성을 다룰 때는 .attr()을 사용하세요.