1. 폼 프로퍼티와 메서드

특별한 HTML 요소 중 하나인 폼에 대해서 알아보자

1-1. FormControlsCollection

1) 개념 및 특징

1. 기명 컬렉션, Named Collection
   1. HTMLCollection을 상속하고, 하나의 메서드만 교체된 interface
   2. namedItem()
2. 두 가지 접근(탐색) 방법이 있다.
   1. document.forms[0] : HTMLCollection과 마찬가지
   2. document.forms.userinfo : 이름
      1. form 태그의 name 속성을 key로 접근 가능하다
      2. 문서 내의 모든 form이 반환되기 때문에 HTML 태그의 중첩 구조와 관계 없이 바로 접근 가능
3. document.forms와 FormElement.elements 의 반환 타입
   1. forms
   2. fieldset: form의 element이면서 동시에 자신의 elements를 가짐
   3. elements
4. elements의 경우 짧은 표기법도 사용 가능

   1. 원래 : document.forms.userinfo.elements.userid

   2. 허용: document.forms.userinfo.userid

   3. 문제점: DOM 요소에 접근해서 name 속성을 변경해도 변경전 이름을 계속 사용할 수 있다.

      1. 예시

         <form id="userinfo" name="userinfo">
           <input id="userid" name="userid" />
         	<input id="username" name="username" />
         </form>
         

         const usernameEl = document.querySelector("#username");
         usernameEl.name = "usernameNew";
         console.log(
         	document.forms.userinfo.username 
         		=== document.forms.userinfo.usernameNew
         	);
         // > true
         

   4. 왜 이런 현상이 생겼을까??

      • 이유 보기

2) 활용

1. input type=”radio” 에서 사용

1-2. elements

1) 개념 및 특징

1. elements 프로퍼티: form 요소 내부에 포함된 모든 form 조작 요소를 나열하는 HTMLFormControlsCollection을 반환하는 프로퍼티
2. 역참조 가능: form 프로퍼티에 자신이 포함된 form(조상) 요소에 접근이 가능

2) 종류

1. input / textarea
   1. 입력값 가져오는 법
      1. value
      2. checked
      3. innerHTML