JAVASCRIPT&JQUERY

자바스트립트 querySelector를 활용한 데이터 참조

9400 2023. 1. 4. 08:55 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
const dataFormMaker = function(){
	const inputYear = document.querySelector('#target-year-input').value;
	const inputMonth = document.querySelector('#target-month-input').value;
	const inputDate = document.querySelector('#target-date-input').value;
	
	console.log(inputYear,inputMonth,inputDate)
	
	
/* 	console.log(document.querySelector('#target-year-input').value)
	console.log(document.querySelector('#target-month-input').value)
	console.log(document.querySelector('#target-date-input').value) */
}

</script>
</head>
<body>
<input id="target-year-input" class="tartget-input" />
<input id="target-month-input"class="tartget-input" />
<input id="target-date-input" class="tartget-input" />

<button onclick="dataFormMaker()">버튼</button>

</body>
</html>

 

 

document 
--> 내가 잇는곳의 태그 전체를 가져옴 

querySelector
-> 태그 자체를 가져옴

콘솔로 찍어보자 
console.log(document.querySelector('input'))   -> input 태그 전체를 가져옴 
console.log(document.querySelector('#target-year-input'))  -> 아이디가 target-year-input인 태그를 가져옴
console.log(document.querySelector('#target-year-input').value) -> 아이디가 target-year-input인 
아이디태그의 값을 가져옴 ( 내가 input태그에 입력한 값을 가져온다)