HTML 양식: 기본으로 돌아가기

프레임워크와 라이브러리는 잠시 잊자. 오늘 우리는 <form /> 요소와 DOM에서 이 요소로 할 수 있는 몇 가지 작업에 대해 이야기할 것입니다.

이가 조금 길어지는 웹 개발자에게는 아마도 이것의 대부분에 익숙할 것입니다. 그러나 초보 개발자에게는 이것이 뉴스가 될 수 있습니다. 어느 쪽이든, 우리는 양식으로 구식 학교를 갈 것이기 때문에 버클을 채우십시오.



querySelector 및 querySelectorAll 와 같은 최신 DOM API를 사용하면 선택기를 통해 양식에 액세스할 수 있습니다. document.querySelector(‘form’); . document에서 직접 양식에 액세스할 수도 있다는 사실을 알고 계셨습니까? HTMLCollections를 통해 사용할 수 있는 document.forms 양식이 있습니다. 좋아하는 편집기에서 개발 도구를 열도록 하겠습니다. 꽤 깔끔하죠?

amazon.ca에 있다고 가정해 보겠습니다.



다음과 같은 양식이 있습니다.

<form class="nav-searchbar" name="site-search">
...
</form>

자, document.forms 개체가 있다는 것을 알 수 있습니다. 개발 도구를 살펴보겠습니다.


document.forms[0]는 우리의 양식을 찾고 페이지에는 다른 양식이 하나 있지만 document.forms에는 두 개의 속성이 더 있습니다. site-search 및 ue_backdetect 가 있습니다. 양식에 대한 위의 마크업을 보면 값이 name 인 ’site-search' 속성이 있음을 알 수 있습니다. 그것은 document.forms 의 추가 속성 중 하나입니다. 아니나 다를까, document.forms[‘site-search’]는 양식을 제공합니다. 개발 도구의 콘솔에서 수행하면document.forms[0] === document.forms[‘site-search’] true를 반환하는 것을 볼 수 있습니다.



아직 파악하지 못했다면 이는 DOM에 표시되는 순서를 나타내는 인덱스를 통해 양식에 액세스할 수 있지만 양식의 name 특성을 통해 액세스할 수도 있음을 의미합니다.




좋아요, 더 많은 사람들이 있습니다. 콘솔에서 const siteSearchForm = document.forms['site-search']를 실행하여 양식에 대한 참조를 얻습니다.

이제 양식에서 사용할 수 있는 속성을 살펴보겠습니다.


action/GET에 대한 URL에 대해 POST와 같은 일부 속성이 표시되지만 목록 아래로 내려가면 elements라는 속성이 있습니다. 흠, 그게 무엇일까요? 😉 개발 도구 콘솔에서 액세스하면 다음을 얻습니다.



뭐? 모든 양식 입력이 거기에 있습니다! 맞습니다 여러분, 이 속성을 통해 모든 <input /> s, <textarea /> s 등에 액세스할 수 있습니다. 꽤 멋지죠? 뿐만 아니라 양식 입력에 name 속성이 있는 경우 document.forms 에 대해 수행한 것과 동일한 작업을 수행할 수 있습니다. 인덱스 또는 이름으로 양식 입력에 액세스할 수 있습니다. siteSearchForm.elements[‘field-keywords’] .

따라서 document 속성을 통해 document.forms에서 바로 양식 및 양식 입력에 액세스할 수 있습니다.

마지막 재미있는 사실 하나. 각 양식 요소에는 양식 요소가 포함된 form DOM 노드에 대한 참조인 <form /> 속성이 있습니다.



이번 DOM Throwback 목요일을 즐기셨기를 바랍니다.