form 태그의 DOM은 input, textarea, select, button 태그가 있으면 해당 태그를 인식해 다음과 같이 순서대로 접근할 수 있습니다.
bubbling.html
<script>
const $form = document.querySelector('#form');
$form[0]; // <input type="text" name="name" id="name" required />
$form[1]; // <input type="email" name="email" id="email" required />
$form[2]; // <button name="button" type="submit">구독</button>
</script>
해당 태그에 name 속성이 있는 경우에는 <폼 태그>.<name 속성 값>으로도 접근할 수 있습니다.
bubbling.html
const $form = document.querySelector('#form');
$form.name; // <input type="text" name="name" id="name" required />
$form.email; // <input type="email" name="email" id="email" required />
$form.button; // <button name="button" type="submit">구독</button>
순서는 매번 숫자를 세어야 하므로 name 속성 값으로 접근하는 것이 편합니다.