✅ Form 태그 진입시
👉 document.form이름
- form 요소의 name 속성값을 통해 접근합니다.
1) document.frm : 폼객체
2) document.frm.name : 폼객체의 이름
*)
[object HTMLInputElement]은 JavaScript가 HTML 요소를 문자열로 변환할 때,
해당 객체가 HTMLInputElement라는 것을 나타내는 기본 문자열 표현입니다.
6) document.frm.length : 해당 폼의 입력요소 개수
- HTMLCollection 객체의 길이를 나타내며, 폼 내에 있는 입력 요소의 총 개수를 반환
⭐️ document.frm.elements[index]
-
elements는 해당 form요소 안에 있는 모든 자식 입력요소를 나타낸다.
-
[index]를 통해서 특정 입력요소 접근 가능
-
입력요소에만 에 접근할 떄 사용
-
유사배열인 HTMLCollection 객체를 반환
js는 인터프리터 방식으로, 🔴인덱스🔴로 특정 입력요소 접근시,
제일 위에 부터 첫번째 순서이다.
위에 예시 코드를 예로 들면
document.frm.elements[0] 입력시,
👉 <input type="text" name="name" value="고호섭"> 접근
[ ❗️ ]
입력요소 접근시, 이름 나오지 않은 이유 : HTML의 입력 요소(<input> 태그) 중에서 첫 번째 요소이기 때문에 이름 부분은 선택되지 않는다.
입력요소 접근시, <br> 나오지 않은 이유 : <input> 태그 중에서 첫 번째 요소를 선택하는 것이므로 <br> 태그는 해당 선택에 포함되지 않는다.
✅ 입력요소 : <input>, <textarea>, <select> 등의 태그✅ document.frm.length 와
document.frm.elements[index]를 이용해보기 !
👉 for 문법
1) document.frm.length 를 통해서 🔴입력요소 개수🔴 구하기
2) 반복문 for을 통해서 🔴입력요소 개수 만큼 반복🔴하기
3) document.frm.elements[index] 를 이용하여,
각, 입력요소를 가져오기 + 변수에 할당하기
✅ document.frm.elements[index]
👉 elements는 해당 form요소 안에 있는 모든 자식 입력요소를 나타낸다.
[index]에, 번호를 넣으면 인터프리터 방식으로 그 요소가 출력 된다.
따라서, elements[i]를 쓰게 되면, 위 사진 처럼 각 순서의 요소들이 쭉 나온다. 
. 을 통해서 해당 요소에 접근 !!
✅ document.form이름.select이름
-
select 요소에 접근
-
select : 안에 option 태그를 달고 있음
(≒ form 태그 안에 여러 input 태그가 있는 경우) -
options : select 내 모든 option요소에 접근
(≒ form 내 모든 입력태그 가져오는 elements)
✅ options : 유사배열 형태로, 모든 option에 접근
- 인덱스로 활용 된다
- options[인덱스].value : 선택한 인덱스의 값에 접근
✅.selectedIndex
: 사용자가 선택한 인덱스 번호 접근
= 사용자가 선택한 option태그의 인덱스에 접근
(알고리즘적 사고 ⭐️)
[왜❓ .selectedIndex 를 사용할까?]
.options : select 내 모든 option의 요소를 가져온다 [🔵유사배열🔵]
.selectedIndex : select 내 내가 선택한 option 🔴인덱스🔴를 가져온다
= options를 통해서 가져온 🔵모든요소🔵에서[🔴인덱스🔴]
👉 원하는 option 요소만 추출 가능하다 !
[options로 모든 요소를 가져온 후 [인덱스]로 바로 하면 안 돼❓]
- 가능합니다 !
- 하지만, select 요소가 수십 수백가지일 경우,
내가 그 인덱스 번호를 하나씩 손으로 세면서 알 수 없으니, 편리한 .selectedIndex 쓰자 !
[ ❗️ 이와 비슷한 폼태그 진입 방법 case ]
1) form 내 입력 태그가 1개인 경우
- document.form.input [ 바로 지정 후, 진입 ]
2) form 내 입력 태그가 여러개인 경우
- document.form.elements[index] (전체 불러와서, 인덱스로 진입)
✅ 동적인 접근, 유연성, 일괄처리 등 이유로 2번이 사용에 좀 더 효율적이다
✅ 입력태그 : <input> <select> <textarea>마지막 정리 😵
🔴 document 최상위
🔵 document 안에 👉 form 태그
🟢 form 태그 안에 👉 input 태그, select 태그, textarea 태그
⭐️ form 태그 안에 모든 입력요소에 진입 👉 elements
☆select 태그 안에 모든 option에 진입 👉 options
[ ❗️ ] 한 줄로 한꺼번에 진입도 가능 !!
1) select내 모든 option에 접근할때
👉 documents.form이름.select이름.options
2) slect내 내가 선택한 option의 인덱스에 접근할떄
👉 documents.form이름.select이름.selectedIndex 
▪️ 검정 테마를 기준으로 작성되었읍니다.