[JavaScript] 값 제어하기 - set/get 사용법 복습

HTML 요소에서 값 가져오기

// id로 접근해서 값 가져오기 
const value1 = document.getElementById('elementId').value;

// jQuery로 값 가져오기 
const value2 = $('#elementId').val();

// name으로 접근해서 값 가져오기
const value3 = document.getElementsByName('elementName')[0].value;

 

 

HTML 요소에 값 설정하기

// id로 접근해서 값 설정
document.getElementById('elementId').value = '새로운 값';

// jQuery로 값 설정
$('#elementId').val('새로운 값');

// name으로 접근해서 값 설정 
document.getElementsByName('elementName')[0].value = '새로운 값';

 

 

실제 활용 예시

// form 데이터를 JSON으로 만들 때
const formData = {
  orderId: $('#orderId').val(),
  userName: $('#userName').val(),
  amount: $('#amount').val()
};

// API 응답 데이터로 화면 갱신할 때
function updateForm(response) {
  $('#orderId').val(response.orderId);
  $('#userName').val(response.userName);
  $('#amount').val(response.amount);
}

// 입력값 초기화할 때
function resetForm() {
  $('#orderId').val('');
  $('#userName').val('');
  $('#amount').val('');
}

 

 

✅ 메모

• val()은 jQuery 메서드, value는 JavaScript 기본 속성
• form 요소뿐만 아니라 select, textarea 등에서도 동일하게 사용
• 여러 input을 일괄 처리할 때는 jQuery가 편리함
• 성능이 중요한 경우 순수 JavaScript 사용 고려

다음에는 이벤트 핸들링 방법에 대해 정리해봐야겠다.