form

form 접근

form은 document의 특수한 구성원이다

클래스나, id 값을 지정하고 querySelect나 getByElement를 이용해서 접근 할 수도 있지만

const formsElem = document.forms;

document.forms를 통해서 접근할 수도 있다

이름에서 눈치 챘을 수도 있겠지만 form이 아니라 form's'다 이름과 순서를 가진 컬렉션인 것

<form name="first">
    <label>
        <input name="one" value="">
    </label>
    <label>
        <input name="two" value="">
    </label>
    <button name="push> button</button>
</form>
<form name="second">
    <label>
        <input name="one" value="">
    </label>
    <label>
        <input name="two" value="">
    </label>
    <button name="push"> button</button>
</form>

위와 같은 html에서 formsElem을 출력해보자

html내에 있는 모든 form들을 다 긁어왔고 순서대로 들어가 있으며 이름또한 존재하는 것을 볼 수 있다

console.log(formsElem[0] === formsElem.first); // <form name="first"/> 'true'
console.log(formsElem[1] === formsElem.second); // <form name="second"/> 'true'

각 줄에는 같은 값을 가진 엘리먼트 들이다

폼 내부 요소

form내부 요소에 접근하는데에는 깊이를 따지지 않고 접근이 가능하다

formsElem[0]에서 그 아래에 있는 모든 form요소에 한번에 접근이 가능하다

console.log(formsElem[0].one);
console.log(formsElem[0].two);
console.log(formsElem[0].push);

역 참조

폼에서 하위 요소로 접근하듯이 하위 요소에서 다시 폼에 접근하는 것도 가능하다

const oneElem = formsElem[0].one;
const twoElem = formsElem[0].two;
const pushElem = formsElem[0].push;

이 셋은 모두 'first' name을 가진 form을 가르킨다