[JS, Jquery] 요소의 속성, 프로퍼티 값

JQuery에서

attr() vs .prop() 차이점

✅ attr()

• .attr()은 HTML 요소의 속성 값을 가져오거나 설정하는 데 사용
  이미지의 src 속성값을 가져오거나 설정할 때 사용

✅  prop()

• .prop()은 HTML 요소의 프로퍼티 값을 가져오거나 설정하는 데 사용
  <input> 요소의 checked 프로퍼티 값을 가져오거나 설정할 때 사용

💡 대부분의 경우 두 메소드 중 어느 것을 사용해도 상관 없음, 그러나 .prop()을 사용하는 것이 더 안정적

 

속성값과 프로퍼티 값의 차이점

1. 속성값은 HTML 문서에서 태그에 지정된 속성

예를 들어, <a href="http://example.com"> 에서

href는 속성 -> 이 속성은 HTML 문서에 명시되어 있으며,

HTML 요소가 DOM에 로드될 때 속성 값이 요소의 속성 노드(attribute node)로 추가됨

// 요소의 속성 값 가져오는 방법
var element = document.querySelector('a');
var href = element.getAttribute('href');

// 요소의 속성 값을 설정하는 방법
element.setAttribute('href', 'http://example.com');

 

2. HTML 요소의 프로퍼티는 HTML 요소 자체의 속성이 아니라, 해당 요소를 나타내는 JavaScript 객체의 속성(property)

<input> 요소의 value 프로퍼티는 사용자가 입력한 값을 나타냄.

이 값은 HTML 문서에 명시되어 있지 않으며,

요소가 DOM에 로드될 때는 없음. 대신, 사용자가 값을 입력하면 JavaScript 객체에 속성으로 추가된다.

// 요소의 프로퍼티 값을 가져오는 방법
var element = document.querySelector('input[type="checkbox"]');
var checked = element.checked;

// 요소의 프로퍼티 값을 설정하는 방법
element.checked = true;

// select 요소 가져오기
var selectElement = document.getElementById('mySelect');

// 선택된 옵션의 인덱스 가져오기
var selectedIndex = selectElement.selectedIndex;

// 선택된 옵션의 값을 가져오기
var selectedValue = selectElement.value;