input 태그 조작

수강 중인 학원 에서 프로젝트를 진행할떄 가장 많이 했던 점이 input 태그의 값을 가져와 조작하는 것이었다. 아무래도 MVC 패턴에서 서버사이드에서 조작을 모두 완성짓기에는 무리가 있었고, 자바스크립트는 참 강력했다.

 

 

• getElementBy~() : 하나의 돔객체 추출
• getElementsBy~() : 해당 매개값에 알맞은 돔객체 들을 Collection 으로 추출

버튼이나 input 버튼에서 KeyUp keyPress Dbclick onClick 등 여러 이벤트가 존재하는데.

이와 엮어서 자바스크립트 메서드를 호출한다. 

var var2 = document.getElementsByTagName('input');

console.log(var2);

// id 값에 어떤 값을 입력하고 제출버튼을 누르면 > 브라우저에서 "당신이 입력한 아이디 값은 ~ 입니다."

function getInputValue() {
	var inputVal = document.getElementsByTagName('input')[0].value;
	
	alert(`당신이 입력한 아이디는 ${inputVal} 입니다.`);
	
}

---

해당 버튼에 클릭 이벤트를 감지하여(이벤트리스너) 이벤트 발생시 자바스크립트 함수를 호출하는 식이다.

<form>
  <input name="userId">
  <input name="passwd">
  <input type="submit" onclick="getInputValue()">//<<<
</form>