jQuery(제이쿼리)를 이용하여 요소들을 선택($(''))하고 해당 요소들을 반복하여 접근(.eq(i))하는 방법을
jQuery(제이쿼리) 없이 순수 자바스크립트 (바닐라JS)로 구현 해보도록 하자.
<!-- 예시 코드 -->
<!DOCTYPE html>
<html>
<head>
<title>Input Value Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<!-- 예시 요소 input 3개 -->
<input type="text" class="exampleClassName" value="Input 1">
<input type="text" class="exampleClassName" value="Input 2">
<input type="text" class="exampleClassName" value="Input 3">
<button id="getValuesBtn">버튼</button>
<script>
// 버튼 요소 id 속성으로 선택하여 변수에 담기
let getValuesBtn = document.getElementById('getValuesBtn');
getValuesBtn.addEventListener('click', function() { // 버튼 클릭을 감지 하는 이벤트
// jQuery(제이쿼리) 방식
let $inputElements = $('.exampleClassName');
for(var i = 0; i < $inputElements.length; i++) {
console.log('Input ' + i + ' Value(jQuery): ' + $inputElements.eq(i).val());
}
//-----------------------------------------------------------------------------
// 순수 자바스크립트 방식 (바닐라JS)
let inputElements = document.querySelectorAll('.exampleClassName');
Array.from(inputElements).forEach(function(inputElement, index) {
console.log('Input ' + index + ' Value(Vanilla JS): ' + inputElement.value);
});
});
</script>
</body>
</html>
'JavaScript' 카테고리의 다른 글
자바스크립트 태그 text 변경 감지 (div, span, ...) (input X) with MutationObserver (0) | 2023.10.28 |
---|---|
JS 호이스팅 / JavaScript Hoisting 자바스크립트 호이스팅 (0) | 2023.09.03 |
JS .map() / JavaScript .map() / 자바스크립트 배열 메서드 / 자바스크립트 .map() 메서드 (0) | 2023.07.23 |
JS / JavaScript function / 자바스크립트 함수 매개변수 기본값 설정 (0) | 2023.07.16 |
JavaScript 자바스크립트 객체의 key 존재여부 확인하기 (0) | 2023.06.25 |
최근댓글