JM Development Diary 개발 일기

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