[javascript ] javascript 로 form이나 element 값 얻어오거나 설정하기

[javascript ] javascript 로 form이나 element 값 얻어오거나 설정하기

javascript 코드를 통해 html 페이지에서 form 및 기타 element의 객체를 얻어오는 것이 가능하다.

객체를 얻은 후에는 해당 값을 얻어오거나 자유롭게 값을 수정할 수 있다.

얻고자하는 값이 form 형식이라면 form으로 접근하여 얻을 수 있다. 

 

document 활용

• document.forms["<form이름>"].elements["<element이름>"]

  ex) document.forms["frm"].elements["name"];
  

 

getElementById, getElementsByName 활용

원하는 객체의 Id나 Name을 알고 있다면 아래 함수를 통해 바로 객체를 얻어올 수 있다.

• document.getElementById("<#id>");
• document.getElementsByName("<#name>");

객체를 얻어온 후에는 javascript reference를 참고하여 원하는 값을 출력하거나 설정하면 된다. 

http://www.w3schools.com/jsref/dom_obj_all.asp

text 타입의 input객체를 얻어왔을 경우 아래¹ property를 활용하면 된다.

input text 내의 값은 value 항목을 활용한다.

 

활용 예제 : FootLock 제품 페이지 내 객체 얻기

 

• FootLocker 사이트 내 객체 얻기

• URL Link : https://www.footlocker.com/product/model:296514/sku:Q2657700/nike-vapormax-97-boys-grade-school/gold/

• 페이지 내 제품 모델명 얻어오기 : Nike VaporMax 97 - Boys' Grade School

  elements[] 사용 시 

  document.forms["product_form"].elements["model_name"]

  getElementById 함수 사용 시 

  document.getElementById("model_name")

 

 

Input Text Object Properties

Property	Description
autocomplete	Sets or returns the value of the autocomplete attribute of a text field
autofocus	Sets or returns whether a text field should automatically get focus when the page loads
defaultValue	Sets or returns the default value of a text field
disabled	Sets or returns whether the text field is disabled, or not
form	Returns a reference to the form that contains the text field
list	Returns a reference to the datalist that contains the text field
maxLength	Sets or returns the value of the maxlength attribute of a text field
name	Sets or returns the value of the name attribute of a text field
pattern	Sets or returns the value of the pattern attribute of a text field
placeholder	Sets or returns the value of the placeholder attribute of a text field
readOnly	Sets or returns whether a text field is read-only, or not
required	Sets or returns whether the text field must be filled out before submitting a form
size	Sets or returns the value of the size attribute of a text field
type	Returns which type of form element a text field is
value	Sets or returns the value of the value attribute of the text field

 

---

1 Input Text Object Properties↩