값을 가져오는 방법
id가 'quantity'인 객체의 값을 가져오는 방법
1) document.getElementById('quantity')
순수 JavaScript에서 id가 quantity인 요소를 선택하는 방법이다.
#quantity라는 CSS 선택자가 아니라 실제 DOM 요소를 반환한다.
값을 가져오려면 element.value 또는 element.textContent 등을 사용해야 한다.
자꾸 value()라고 하는데 메서드가 아니라 프로퍼티(속성)이기 때문에 함수처럼 ()를 붙이지 않고 단순히 .을 사용해 값을 가져와야 한다.
2) $('#quantity').val()
jQuery를 사용할 때 id가 quantity인 요소의 값을 쉽게 가져오는 방법이다.
val()은 폼 요소의 값을 가져오거나 설정할 때 사용된다. (input, select, textarea와 같은 요소에 적합하다.)
3) document.querySelector('#quantity')
querySelector()는 CSS 선택자 문법을 사용해 첫 번째 일치하는 요소를 선택하는 방법이다.
이 방식은 #quantity라는 id를 가진 요소를 선택하고 반환된 DOM 요소에서 값을 가져오려면 element.value 또는 element.textContent 등을 사용해야 한다.
결론 :
순수 JavaScript에서는 getElementById나 querySelector를 사용하고
jQuery를 사용할 때는 .val()을 사용하는 게 간편하다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body class="mt-3 ms-3">
갯수 <input type="text" name="quantity" id="quantity" value="1">
<button id="up">+</button>
<button id="down">-</button>
<hr>
취미<br>
<ul>
<li>야구<input type="checkbox" name="hobby" value="야구"></li>
<li>농구<input type="checkbox" name="hobby" value="농구"></li>
<li>게임<input type="checkbox" name="hobby" value="게임"></li>
</ul>
<button id = "show">결과보기</button><br><br>
결과값:<div id="result1"></div>
<hr>
글자수 세기<br>
<textarea rows="10" cols="10" id="change"></textarea><br>
입력문자수:<span id="result2"></span>
<hr>
전체선택
<input type="checkbox" name="all" id = "all_check"><br>
<input type="checkbox" name="java" class="lang"> java<br>
<input type="checkbox" name="sql" class="lang"> sql<br>
<input type="checkbox" name="angular" class="lang"> angular<br>
</body>
<script>
$(function() {
$('#up').click(function() {
let quantity = $('#quantity');
quantity.val(parseInt(quantity.val()) + 1);
});
$('#down').click(function() {
let quantity = $('#quantity');
if (parseInt(quantity.val()) < 1) {
alert('값이 0보다 작아집니다.');
}
else {
quantity.val(parseInt(quantity.val()) - 1);
}
});
$('#show').click(function() {
$('#result1').empty();
$('input[type="checkbox"][name="hobby"]:checked').each(function() {
$('#result1').append($(this).val() + '<br>');
});
});
$('#change').keyup(function() {
$('#result2').text(this.value.length);
});
// 전체선택 체크박스 클릭 시
$('#all_check').click(function() {
var isChecked = $(this).prop('checked');
$('.lang').prop('checked', isChecked);
});
$('.lang').change(function() {
if ($('.lang:checked').length < $('.lang').length) {
$('#all_check').prop('checked', false);
}
else {
$('#all_check').prop('checked', true);
}
});
});
</script>
</html>prop()과 attr()에 대해 이해가 잘 가지 않는당...
