고정 헤더 영역
상세 컨텐츠
본문
JavaScript에서는 입력 요소의 유형과 요구 사항에 따라 다양한 방법을 사용하여 HTML 문서의 입력 요소에서 값을 검색할 수 있습니다. 이를 수행하는 몇 가지 일반적인 방법은 다음과 같습니다.
1."getElementById" 사용 :
입력 요소에 "id" 특성을 할당한 경우 "getElementById"를 사용하여 요소를 가져온 다음 해당 값 속성에 액세스할 수 있습니다.
<HTML>
<input type="text" id="myInput">
</HTML>
<script>
const myInputValue = document.getElementById('myInput').value;
console.log(myInputValue);
</script>
2."querySelector" 사용 :
"querySelector" 메서드를 사용하면 CSS 선택기를 사용하여 요소를 선택할 수 있습니다. 이를 사용하여 "id", "class" 또는 기타 속성으로 입력 요소를 가져올 수 있습니다.
<HTML>
<input type="text" id="myInput">
</HTML>
<script>
const myInputValue = document.querySelector('#myInput').value;
console.log(myInputValue);
</script>
3."getElementsByName" or "getElementsByTagName" 사용 :
동일한 "이름" 또는 "태그"를 가진 입력 요소가 여러 개 있는 경우 이러한 메서드를 사용하여 요소 컬렉션을 가져온 다음 원하는 입력 요소의 값에 액세스할 수 있습니다.
<HTML>
<input type="text" name="myInput">
</HTML>
<script>
const myInputValue = document.getElementsByName('myInput')[0].value;
console.log(myInputValue);
</script>
4."getElementsByClassName" 사용 :
동일한 클래스의 입력 요소가 여러 개 있는 경우 "getElementsByClassName"을 사용하여 컬렉션을 가져온 다음 원하는 입력 요소의 값에 액세스할 수 있습니다.
<HTML>
<input type="text" class="myInput">
</HTML>
<script>
const myInputValue = document.getElementsByClassName('myInput')[0].value;
console.log(myInputValue);
</script>
5."querySelectorAll" (for multiple elements) 사용 :
입력 요소가 여러 개 있고 모든 요소에서 값을 가져오려는 경우 루프 또는 배열 메서드와 함께 "querySelectorAll"을 사용할 수 있습니다.
<HTML>
<input type="text" class="myInput">
<input type="text" class="myInput">
</HTML>
<script>
const myInputValues = Array.from(document.querySelectorAll('.myInput')).map(input => input.value); console.log(myInputValues);
</script>
6.form 양식제출로 사용 :
입력 요소가 양식의 일부인 경우 양식이 제출될 때 해당 값을 검색할 수 있습니다. "onsubmit" 이벤트를 사용하거나 양식의 "submit" 이벤트를 수신할 수 있습니다.
<HTML>
<form id="myForm">
<input type="text" name="input1">
<input type="text" name="input2">
<button type="submit">Submit</button>
</form>
</HTML>
<script>
document.getElementById('myForm').addEventListener('submit', function(event) {
event.preventDefault(); // Prevent form submission to see the values
const formData = new FormData(event.target);
const input1Value = formData.get('input1');
const input2Value = formData.get('input2');
console.log(input1Value, input2Value);
});
</script>
JavaScript를 사용하여 HTML 문서의 입력 요소에서 값을 가져오는 일반적인 방법 중 일부입니다.
선택하는 방법은 특정 사용 사례와 HTML 문서의 구조에 약간씩 달라질 수 있습니다.
'컴퓨터+IT' 카테고리의 다른 글
| [PHP]Operators_PHP연산자의 종류와 설명 (0) | 2023.08.03 |
|---|---|
| [Javascript]볼륨조절 슬라이드바 만들기_input range (0) | 2023.08.02 |
| [PHP]strtotime()_날짜, 시간 계산(더하기/빼기) 기능 (0) | 2023.07.28 |
| [Javascript]Date()_날짜 및 시간 개체 (0) | 2023.07.26 |
| [PHP]date()_날짜, 요일, 시간, 달력 관련 함수 (0) | 2023.07.24 |
댓글 영역