DOM으로 Form 요소 접근

[id나 class r값 사용해 form 요소 접근]

 

<label class=field” for=“bilingName”> 이름 : </label>

<input type=“text” class = “input-box”  id =“billingName””  name = “billingName”>

 

위의 텍스트 필드에 접근하기 위에서는

 

document.querySelector(“#billingName”)

을 입력하면 된다.

 

 

만약 텍스트 필드의 값을 가져오기 위해서는

document.querySelector(#billingName).vlaue

처럼 .value를 붙여주면 된다. 

 

그러면 사용자가 텍스트 필드에 입력한 값을 추적하게 된다.

 

 

 

 

[name 값을 사용해 폼 요소에 접근]

 

form 요소에 id나 class 속성이 없고 name 속성만 있다면 name 식별자를 사용해 폼요소에 접근 가능

이 방법을 사용하려면 <form>태그에 <name> 속성이 지정되어있어야 함

 

 

<form name =“ship”>
    <label class =“field” for =“shippingName”> 이름 : </label>
    <input type =“text” class =“input-box” id=“shippingName” name=“shippingName”>
</form>

위의 코드에서 폼 안에 있는 텍스트 필드에 접근하려면 <form>의 name 값과 텍스트 필드의 name값을 사용하면 된다.

 

즉 document.ship.shippingName 을 입력하면 텍스트 필드에 접근할 수 있다.

document.forms[“ship”].elements[“shippingName”] 을 사용해도 된다.

 

docment.ship.shippingName.value를 사용하면 텍스트 필드에 입력한 값을 가져올 수 있다.

 

 

 

 

[폼 배열을 사용해 폼 요소에 접근]

 

forms 속성은 문서 안에 있는 <form> 태그를 모두 가져와 배열 형태로 반환

id,class,name 모든 속성이 없을 때 사용

 

<form>
    <div id  =“login_input”>
        <input type=“text” autofocus placeholder =“아이디”>
        <input type=“password” placeholder = “비밀번호”>
    </div>
    <div id = ”login_bttn”>
        <button type=“submit” class=“order”> 로그인 </button>
    </div>
</form>

 

document.forms

해당 폼 안에 있는 폼 요소를 모두 가져오는 속성

HTMLCollection [form]이 나오게 된다.

 

 

document.forms[0].elements[0].vale

 

현재 문서의, 첫 번째 form의, 첫 번째 요소의, 값을 가져와라 라는 뜻이다.