Javascript DOM 객체 3 - Javascript
2021/02/01 - [IT국비교육] - Index Javascript
2021/02/11 - [IT국비교육/Javascript] - Javascript DOM 객체 2 - Javascript
10. FileUpload 객체
<input type=“file” ~> 관리하는 객체, 파일 입력 상자 태그를 관리하는 객체입니다.
- 객체 생성 방법
객체를 생성하지 않고 사용합니다.
- 속성변수 호출 방법
document.Form태그Name값.FileUpload태그Name값.속성변수
- 메소드 호출 방법
document.Form태그Name값.FileUpload태그Name값.메소드(~)
- 속성변수 종류
| 속성변수 이름 | 설명 |
| value | 파일 입력 상자에 출력된 문자열이 저장 ※ 보안상 문자열을 새로 설정할 수는 없음 |
11. Radio 객체
<input type=“radio” ~>를 관리하는 객체로, 라디오 단추 태그를 관리하는 객체입니다.
※ 같은 이름의 radio 태그는 보통 2개 이상 나옵니다.(1개이면 선택한 후 풀 수 없기 때문)
- 객체 생성 방법
객체를 생성하지 않고 사용합니다.
- 속성변수 호출 방법
document.Form태그Name값.Radio태그Name값[n].속성변수
- 메소드 호출 방법
document.Form태그Name값.Radio태그Name값[n].메소드(~)
- 속성변수 종류
| 속성변수 이름 | 설명 |
| value | 체크된 라디로 버튼의 value 속성값이 저장되어 있음 |
| length | 같은 name으로 그룹화 된 radio 양식의 개수가 저장되어 있음 ※ radion 양식의 개수가 1개이면 length에 undefined를 저장 |
| checked | 체크 여부 정보가 저장되어 있음 체크되어 있으면 true, 아니면 false 저장 |
| defaultChecked | 디폴트 체크 여부 정보가 저장되어 있음 체크되어 있으면 true, 아니면 false 저장 |
- 메소드 종류
| 메소드 이름 | 설명 |
| click() | radio 단추를 선택 혹은 해제시킴 |
12. Checkbox 객체
<input type=“checkbox” ~>를 관리하는 객체로, 체크 상자 태그를 관리하는 객체입니다.
※ 같은 이름의 checkbox 태그는 1개 이상 나올 수 있습니다.
- 객체 생성 방법
객체를 생성하지 않고 사용합니다.
- 속성변수 호출 방법
checkbox 태그가 1개 이상일 경우
document.Form태그Name값.Checkbox태그Name값.속성변수
checkbox 태그가 2개 이상일 경우
document.Form태그Name값.Checkbox태그Name값[n].속성변수
- 메소드 호출 방법
checkbox 태그가 1개 이상일 경우
document.Form태그Name값.Checkbox태그Name값.메소드(~)
checkbox 태그가 2개 이상일 경우
document.Form태그Name값.Checkbox태그Name값[n].메소드(~)
- 속성변수 종류
| 속성변수 이름 | 설명 |
| value | 체크된 checkbox의 value 속성값이 저장되어 있음 |
| length | 같은 name 속성값으로 그룹화된 checkbox 양식의 개수가 저장되어 있음 ※ checkbox 양식의 개수가 1개이면 length에 undefined를 저장 |
| checked | 체크 여부 정보가 저장되어 있음 체크되어 있으면 true, 아니면 false 저장 |
| defaultChecked | 디폴트 체크 여부 정보가 저장되어 있음 체크되어 있으면 true, 아니면 false 저장 |
- 메소드 종류
| 메소드 이름 | 설명 |
| click() | checkbox 단추를 선택 혹은 해제시킴 |
13. Select 객체
<select ~>를 관리하는 객체로, 목록 상자 태그를 관리하는 객체입니다.
- 객체 생성 방법
객체를 생성하지 않고 사용합니다.
- 속성변수 호출 방법
document.Form태그Name값.Select태그Name값.속성변수
- 메소드 호출 방법
document.Form태그Name값.Select태그Name값.메소드(~)
- 속성변수 종류
| 속성변수 이름 | 설명 |
| value | 선택한 목록에 해당하는 option 태그 안의 value 속성값이 저장되어 있음 |
| options | Option 객체들을 저장한 Array 객체의 참조변수 |
| selectedIndex | 목록상자에서 선택된 목록의 인덱스 번호를 저장 |
| size | 목록상자의 펼쳐진 개수가 저장되어 있음 |
| multiple | 다중 선택 가능 여부가 저장되어 있음 다중 선택 가능하면 true, 아니면 false |
- 메소드 종류
| 메소드 이름 | 설명 |
| focus() | 포커스를 들여 놓음 |
| blur() | 포커스를 제거함 |
14. Option 객체
<select ~> 안에 삽입되는 option 태그를 관리하는 객체, select 태그 안의 목록을 관리하는 객체입니다.
- 객체 생성 방법
객체를 생성하지 않고 사용합니다.
- 속성변수 호출 방법
document.Form태그Name값.Select태그Name값.options[index].속성변수
- 속성변수 종류
| 속성변수 이름 | 설명 |
| text | <option>와 </option> 안에 저장된 문자열 |
| value | option 태그 안의 속성값 value가 저장되어 있음 |
| selected | 선택 여부가 저장되어 있음 true or false |