모체 select 개체 속에서 모양으로 풀다운 박스 사용자 선택 입력필드를 참조한다
|
Script | [propVal=]formObj...propName; |
| HTML | propName="propVal">innerString |
elements 배열변수의 해당 element가 select의 경우에만 해당된다.
아래 속성들 중의 하나이다.
사용자가 여러개의 선택이 가능한 항목들 중에서 한개 혹은 여러개의 항목을 선택하여 인터랙티브(Interactive)하게 원하는 기능을 수행하게 하는데 사용된다.
Option 개체는 form 개체(HTML <FORM> 태그) 속의 select 개체(HTML <SELECT> 태그) 속에서 <OPTION> 태그로 생성된다.
<FORM>...<SELECT><OPTION>...</OPTION> <OPTION>...</OPTION>...</SELECT>...</FORM>
또한 Javascript로도 생성, 항목추가를 할 수 있다.
document.formObj.selectObj.optionObj[3]=new Option('선택 4','value4',true,true);
document.formObj.selectObj.optionObj[4]=new Option('선택 5','value5')
생성된 선택항목을 삭제할 수도 있다. history.go(0)로 새로 로딩해야 문서에 반영된다.
document.formObj.selectObj.optionObj[3]=null; history.go(0);
한개의 form 개체 속에서 select 개체를 만들고, form.elements 배열변수에 type 속성이 select로 등록된다.
Option 개체는 조상인 form 개체에 엘레멘트(elements)의 배열변수로 저장되어 있는 모체 select 개체의 Option 개체들의 배열변수(options)를 구성하고 select.options으로 호출될 수 있다.항목 중에서의 선택은 스크롤하여 초점을 해당 항목에 주면 되는데, Javascript로 초기값으로의 선택은 인수 defaultSelected 속성이 사용되고, 인수 selected 속성은 복수 선택에 사용된다.(복수선택은 <SELECT multiple>)
IE5 이후, OPTION 엘레멘트는 all 컬렉션에 포함되었다. 이전 버전에서는 SELECT 엘레멘트에서 options 컬렉션을 통해서 접속할 수 있다.
OPTION 엘레멘트는 동일한 윈도우의 OPTION 엘레멘트들이 생성한 SELECT 엘레멘트 속에만 추가할 수 있다.
background-color와 color를 제외하고는 option의 style 개체를 통한 지정은 무시된다.
SELECT 엘레멘트에서 전체적으로 지정된 스타일은 개별 option에서의 지정으로 덮어씌우기 된다.
이 개체는 스크립트를 포함하여 IE3.0부터 적용된다.
이 엘레멘트는 블럭모드이다.
이 엘레멘트는 종료태그를 필요로 하지 않는다.
이 개체는 (영문)HTML3.2에서 정의되었다.
설명을 위한 예제
<FORM name="formObj"> <SELECT name="selectObj onchange="showOpt.innerText='selectedIndex='+this.selectedIndex""> <OPTION name="optionName1" value="option Value 1">선택사항 1</option> <OPTION name="optionName2" value="option Value 2">선택사항 2</option> <OPTION name="optionName3" value="option Value 3" selected class=blue style="behavior:url(../public/hilite.htc)" dir=ltr lang=ko language=javascript>선택사항 3</option> <OPTION name="optionName4" value="option Value 4">선택사항 4</option> </SELECT> <SPAN id=showOpt> </SPAN> </FORM> <SCRIPT>oObj=formObj.selectObj(2);</SCRIPT> |
| 컬렉션 | 설명과 예제 코드 | 결과 | 참고 |
|---|---|---|---|
| attributes | 개체의 애트리뷰트(attribute 개체)들의 배열변수를 참조하고 반환한다. | ||
| <SCRIPT>document.write(oObj.attributes.length)</SCRIPT> | |||
| behaviorUrns | 엘레멘트에 첨부된 비해이버(behavior)들을 인식하는 주소(URN) 문자열들의 배열변수를 참조하고 반환한다. | ||
| <SCRIPT>document.write(oObj.behaviorUrns.length)</SCRIPT> | |||
| childNodes | 개체의 바로 종속된 자식들의 엘레멘트 개체들과 TextNode 개체들의 배열변수를 참조하고 반환한다. | ||
| <SCRIPT>document.write(oObj.childNodes.length)</SCRIPT> | |||
| children | 개체의 바로 종속된 DHTML 개체들인 자식들의 배열변수를 참조하고 반환한다. | ||
| <SCRIPT>document.write(oObj.children.length)</SCRIPT> | |||
| 개체 | 설명 | 결과 |
|---|---|---|
| currentStyle | 공통 스타일쉬트, 인라인 스타일 HTML 애트리뷰트등으로 지정한 개체의 카스케이딩 형식과 스타일들 참조한다. | |
| <SCRIPT>document.write(oObj.currentStyle.color)</SCRIPT> | ||
| runtimeStyle | 덮어 씌워진 최종 공통 스타일쉬트, 인라인 스타일 HTML 애트리뷰트등으로 지정한 개체의 카스케이딩 형식과 스타일들 참조한다. | |
| <BUTTON onclick="oObj.runtimeStyle.color='red'">적색으로</BUTTON> 단추를 클릭하고 예제의 색상을 확인하라. |
||
| style | 개체의 현재 모든 가능한 인라인 스타일 설정들을 참조한다. | |
| <SCRIPT>document.write(oObj.style.cssText.length))</SCRIPT> | ||
form(개체) 속성 IE NS (form="oVal"> 애트리뷰트)length 속성 IE3.02 NSname 속성 IE NSselected 속성 IE3.02 NS2text 속성 IE3.02 NS2type 속성 IE NSvalue 속성 IE3.02 NS2 (value="vVal"> 애트리뷰트)| style | script |
|---|---|
| {background-attachment:val} | obj.style.backgroundAttachment[=val] |
| ⇒ 문서 속의 배경 이미지를 개체에 배열 방식을 반환하거나 설정한다. | |
| {background-color:val} | obj.style.backgroundColor[=val] |
| ⇒ 개체의 배경에 깔리는 색상을 반환하거나 설정한다. | |
| {background-position-x:val} | obj.style.backgroundPositionX[=val] |
| ⇒ backgroundPosition 속성의 x 좌표를 반환하거나 설정한다. | |
| {background-position-y:val} | obj.style.backgroundPositionY[=val] |
| ⇒ backgroundPosition 속성의 y 좌표를 반환하거나 설정한다. | |
| {behavior:val} | obj.style.behavior[=val] |
| ⇒ DHTML behavior의 소개 위치를 반환하거나 설정한다. | |
| {clear:val} | obj.style.clear[=val] |
| ⇒ 개체에서 부동(float)부분의 면의 왼쪽, 오른쪽 혹은 양쪽으로 표현이 허용하는가를 반환하거나 설정한다. | |
| {color:val} | obj.style.color[=val] |
| ⇒ 개체의 글자 색상을 반환하거나 설정한다. | |
| {direction:val} | obj.style.direction[=val] |
| ⇒ 개체의 읽는 순서를 반환하거나 설정한다. | |
| 없슴 | obj.style.hasLayout |
| ⇒ 개체가 레이아웃(layout)을 가지고 있는가를 부울값으로 반환한다. | |
| {height:val} | obj.style.height[=val] |
| ⇒ 개체의 높이를 반환하거나 설정한다. | |
| {layout-flow:val} | obj.style.layoutFlow[=val] |
| ⇒ 개체 내용의 방향이나 흐름방향을 반환하거나 설정한다. | |
| {layout-grid:val} | obj.style.layoutGrid[=val] |
| ⇒ 문자들의 레이아웃을 지정하는 문서 그리드(grid) 속성들을 일괄적으로 반환하거나 설정한다. | |
| {layout-grid-mode:val} | obj.style.layoutGridMode[=val] |
| ⇒ 텍스트 레이아웃 그리드에 가로, 세로가 사용되었는가를 반환하거나 설정한다 | |
| 없슴 | obj.style.pixelBottom[=val] |
| ⇒ 개체의 아래쪽 위치를 픽셀단위로 반환하거나 설정한다. | |
| 없슴 | obj.style.pixelHeight[=val] |
| ⇒ 개체의 높이를 픽셀단위로 반환하거나 설정한다. | |
| 없슴 | obj.style.pixelLeft[=val] |
| ⇒ 개체의 왼쪽 위치를 픽셀단위로 반환하거나 설정한다. | |
| 없슴 | obj.style.pixelRight[=val] |
| ⇒ 개체의 오른쪽 위치를 픽셀단위로 반환하거나 설정한다. | |
| 없슴 | obj.style.pixelTop[=val] |
| ⇒ 개체의 위쪽 위치를 픽셀단위로 반환하거나 설정한다. | |
| 없슴 | obj.style.pixelWidth[=val] |
| ⇒ 개체의 너비를 픽셀단위로 반환하거나 설정한다. | |
| 없슴 | obj.style.posBottom[=val] |
| ⇒ bottom 애트리뷰트로 지정된 단위로 개체의 아래쪽 위치를 반환하거나 설정한다. | |
| 없슴 | obj.style.posHeight[=val] |
| ⇒ height 애트리뷰트로 지정된 단위로 개체의 높이를 반환하거나 설정한다. | |
| 없슴 | obj.style.posLeft[=val] |
| ⇒ left 애트리뷰트로 지정된 단위로 개체의 왼쪽 위치를 반환하거나 설정한다. | |
| 없슴 | obj.style.posRight[=val] |
| ⇒ right 애트리뷰트로 지정된 단위로 개체의 오른쪽 위치를 반환하거나 설정한다. | |
| 없슴 | obj.style.posTop[=val] |
| ⇒ top 애트리뷰트로 지정된 단위로 개체의 위쪽 위치를 반환하거나 설정한다. | |
| 없슴 | obj.style.posWidth[=val] |
| ⇒ width 애트리뷰트로 지정된 단위로 개체의 너비를 반환하거나 설정한다. | |
| {text-autospace:val} | obj.style.textAutospace[=val] |
| ⇒ 조정된 문자를 위한 자동 문자 간격 맞추기를 반환하거나 설정한다. | |
| {text-underline-position:val} | obj.style.textUnderlinePosition[=val] |
| ⇒ 개체의 textDecoration 속성이 'underline'로 설정된 경우 밑줄의 위치를 반환하거나 설정한다. | |
| {unicode-bidi:val} | obj.style.unicodeBidi[=val] |
| ⇒ 양방향 알고리즘에 관한 깔린 수준을 반환하거나 설정한다. | |
| {width:val} | obj.style.width[=val] |
| ⇒ 개체의 너비를 반환하거나 설정한다. | |
| {word-wrap:val} | obj.style.wordWrap[=val] |
| ⇒ 내용이 용기 개체의 범위를 초과하면 단어를 자를 것인가를 반환하거나 설정한다. | |
| {writing-mode:val} | obj.style.writingMode[=val] |
| ⇒ 개체속 내용의 방향이나 흐름을 반환하거나 설정한다. | |
| {zoom:val} | obj.style.zoom[=val] |
| ⇒ 개체의 확대 배율을 반환하거나 설정한다. | |
| 메서드 | 설명 |
|---|---|
| add | IE4 -
지정한 개체의 항목을 추가한다. 먼저 해당 엘레멘트를 생성하고 개체를 추가한다.
문법: .add(addObj) |
| addBehavior | 엘레멘트에 behavior를 추가한다. |
| appendChild | 개체의 자식개체로 한 엘레멘트를 추가한다. |
| applyElement | 개체를 다른 엘레멘트의 자식이나 모체 개체로 만든다. |
| attachEvent | IE -
이벤트에 특정 기능을 묶어, 기능함수가 개체에서 이벤트가 발생되면 언제나 호출되게 한다. 이벤트의 제거는 detachEvent에서 한다. 반환값은 부울값이다. 문법: [bVal=].object.attachEvent(event,functObj)
event는 필수요소이고, 표준 이벤트 문자열이다. functObj도 필수요소이고 이벤트가 발생되면 호출될 기능함수이다.코드: function callFunc(){alert('ondblclick 이벤트 발생')}document.attachEvent('ondblclick',callFunc) 결과: // 문서 위 아무데서나 더블클릭 해 보라. 코드:<INPUT type=button value="attachEvent 재설정" onclick="document.detachEvent('ondblclick',callFunc);document.attachEvent('ondblclick',callFunc)"></SPAN> 결과: |
| clearAttributes | 개체의 모든 애트리뷰트들과 값들을 삭제한다. |
| click |
IE NS
개체를 클릭하는 것과 동일하게 onclick 이벤트가 발생된다.
문법: .click() |
| cloneNode | 문서 계통도로부터 개체의 참조를 복사한다. |
| componentFromPoint | 어떤 이벤트에서 지정된 좌표에 위치한 콤포넨트를 반환한다. |
| contains | 개체 속에 주어진 엘레멘트가 있는가를 점검한다. |
| detachEvent | IE5 -
attachEvent 이벤트로 첨부된 이벤트를 제거한다. 반환값은 없다.
문법: .detachEvent(event,funcion)
코드: <INPUT type=button value="detachEvent" onclick="document.detachEvent('ondblclick',callFunc)"></SPAN>결과: // 클릭 후에는 attachEvent에서 설정된 이벤트가 제거된다. 제거 후 더블클릭해 보라. |
| dragDrop | ondragstart 이벤트를 시작한다. |
| fireEvent | 개체에서 지정한 이벤트를 발생시킨다. |
| getAdjacentText | 개체의 인접 문자열을 반환한다. |
| getAttribute | 지정된 애트리뷰트의 값을 반환한다. |
| getAttributeNode | IE6 attribute.name속성을 참조하는 attribute 개체를 반환한다. |
| getBoundingClientRect | TextRectangle 개체들의 컬렉션에 연결됨을 지정하는 개체를 반환한다. |
| getClientRects | 개체의 내용이나 클라이언트 범위(range)의 배치(layout)를 기술하는 사각형(rectangle)들의 컬렉션을 반환한다. 각 사각형은 한 줄이다. |
| getExpression | 주어진 속성의 표현(expression)을 반환한다. |
| hasChildNodes | 개체가 자식개체를 가지고 가지고 있는가를 나타내는 값을 반환한다. |
| insertAdjacentElement | 지정한 위치에 엘레멘트를 삽입한다. |
| insertAdjacentHTML | 엘레멘트의 지정된 위치에 주어진 HTML 문자열을 삽입한다. |
| insertAdjacentText | 엘레멘트의 지정된 위치에 주어진 문자열을 삽입한다. |
| insertBefore | 문서 계통도에서 모체 개체의 자식 노드로 엘레멘트를 삽입한다. |
| mergeAttributes | 지정된 개체에 모든 읽기/쓰기 애트리뷰트를 복사한다. |
| normalize | IE6 개체의 인접 TextNode 개체를 통합하여 문서 개체 모델을 정상화한다. |
| releaseCapture | 현재 문서의 개체로 부터 마우스 캡쳐를 제거한다. |
| remove | IE4 -
지정한 개체의 항목을 삭제한다.
문법: .remove(index) |
| removeAttribute | 개체로 부터 애트리뷰트를 제거한다. |
| removeAttributeNode | IE6 개체로 부터 애트리뷰트 개체 노드를 제거한다. |
| removeBehavior | 개체로부터 behavior를 제거한다. |
| removeChild | 개체로부터 자식 노드를 제거한다. |
| removeExpression | 지정한 속성으로부터 표현(expression)을 제거한다. |
| removeNode | 문서 계통도에서 개체를 제거한다. |
| replaceAdjacentText | 개체에 인접 문자열을 교체한다. |
| replaceChild | 현재의 자식 엘레멘트를 새로운 자식 엘레멘트로 교체한다. |
| replaceNode | 개체를 다른 엘레멘트로 교체한다. |
| setAttribute | 지정된 애트리뷰트를 설정한다. |
| setAttributeNode | IE6 개체의 부분으로 애트리뷰트 개체 노드를 설정한다. |
| setCapture | 현재 문서에 소속된 개체의 마우스 캡쳐를 설정한다 |
| setExpression | 지정된 개체의 표현(expression)을 설정한다. |
| swapNode | 문서 계통도에서 두 개체의 위치를 서로 바꾼다. |
| watch와 unwatch | - NS select 개체는 Object 개체의 watchNS와 unwatchNS 메서드를 전달받는다. |
| 이벤트 | 설명 |
|---|---|
| onlayoutcomplete | 원본 문서로부터 내용을 현재의 LayoutRect 개체에 채워넣기가 끝나고 인쇄하거나 인쇄미리보기를 실행하면 발생된다. |
| onlosecapture | 개체가 마우스 캡쳐(capture)를 해제하면 발생한다. |
| onpropertychange | 개체의 속성을 변경발생한다. |
| onreadystatechange | 개체의 준비상태(readyState) 속성을 변경시키면 발생한다. |
| onselectstart | 개체가 선택되기 시작하면 발생한다. |
| ontimeerror | 일반적으로 유효하지 않은 값의 결과에 의하여, 시간을 지정하는 오류가 일어나면 발생된다. |
| Behavior | 설명 |
|---|---|
| clientCaps | Explorer에 대한 정보를 제공하고 요청에 의하여 브라우저의 콤포넨트를 설치하는 방법늘 제공한다. |
| download | 파일을 다운로드하고 완료되면 완료를 알려주는 기능을 갖고있다. |
| homePage | 사용자의 홈페이지에 대한 정보를 포함하고 있다. |
| httpFolder | 브라우저가 항해할 때 폴더를 볼수 있는 스크립트 기능이 포함되어 있다. |
| saveFavorite | 개체가 즐겨찾기(favorite)에 데이터를 유지하게 한다. |
| saveHistory | 개체가 방문한 기록(history)에 데이터를 유지하게 한다. |
| time | (불량) HTML 엘레멘트에 활성 시간을 제공한다. |
| time2 | HTML 엘레멘트나 엘레멘트 구룹에 활성 시간을 제공한다. |
| userData | 개체가 데이터를 사용자 데이터(user data)에 유지하게 한다. |
개체 예제
위 예제 선택결과이므로 선택들 변경하며 확인해 보라.
<SCRIPT>
function fnChange(){
str='formObj.selectObj.selectedIndex='+formObj.selectObj.selectedIndex+'<BR>';
str+='formObj.selectObj.options[formObj.selectObj.selectedIndex].text='+
formObj.selectObj.options[formObj.selectObj.selectedIndex].text+'<BR><BR>';
for (i=0;i< formObj.selectObj.length;i++){
str+='formObj.selectObj.options['+i+'].text="'+formObj.selectObj.options[i].text+'" ';
str+='formObj.selectObj.options['+i+'].selected='+formObj.selectObj.options[i].selected+'<BR>';
}
showA.innerHTML=str;
}
</SCRIPT>
<DIV id=showA>결과 표시창</DIV>
<BUTTON onclick=fnChange()>클릭하여 위 예제 결과 보기</BUTTON>
<SCRIPT>
function doShow(){
selidx=fName.selName.selectedIndex;
str='fName.selName.selectedIndex='+selidx+'<BR>';
str+='fName.selName.options('+selidx+').innerText=';
str+=fName.selName.options(selidx).innerText+'<BR>';
str+='fName.selName.options('+selidx+').name=';
str+=fName.selName.options(selidx).name+'<BR>';
str+='fName.selName.options('+selidx+').value=';
str+=fName.selName.options(selidx).value+'<BR>';
str+='fName.selName.options('+selidx+').parentElement.label=';
str+=fName.selName.options(selidx).parentElement.label+'<BR>';
str+='fName.selName.options('+selidx+').parentElement.name=';
str+=fName.selName.options(selidx).parentElement.name+'<BR>';
showB.innerHTML=str;
}
</SCRIPT>
<FORM name=fName>
<SELECT name=selName onchange="doShow()">
<OPTGROUP label="과실" id=optgroupObj1 name=fruitGroup>
<OPTION name=optObj1 value=apple>사과</OPTION>
<OPTION name=optObj2 value=peach selected>복숭아</OPTION>
<OPTION name=optObj3 value=grape>포도</OPTION>
</OPTGROUP>
<OPTGROUP label="채소" id=optgroupObj2 name=vegiGroup disabled>
<OPTION name=optObj4 value=strawberry>딸기</OPTION>
<OPTION name=optObj5 value=tomato>도마도</OPTION>
<OPTION name=optObj6 value=melon>멜론</OPTION>
</OPTGROUP>
</SELECT>
</FORM>
<DIV id=showB>결과 표시창</DIV>