HTML 엘레멘트에 포함된 문서를 참조한다.
|
Script | [propVal=].propName; |
| HTML | propName="propVal">innerString |
이 개체는 IE3.0에서 지원되고 스크립트는 IE4.0에서 부터 지원된다.
IE6부터 표준에 부합 모드 문서내용이 표현되는 전 표면의 캔바스를 대표하는 !DOCTYPE 선언을 할 수 있다.
표준 부합하도로 스위칭하면 이 엘레멘트는 위치된 모체가 없는 엘레멘트의 위치 용기 엘레멘트가 된다.
!DOCTYPE 선언이 표준에 부합하는 모드가 아니고 이전 버전의 Explorer이면
body 개체는 문서의 내용이 표현되는 전체 면을 대표한다.
이 엘레멘트는 표현되지 않는다.
이 엘레멘트는 종료태그가 필요하다.
이 개체는 (영문)HTML3.2에서 정의되었다.
설명을 위한 예제
<HTML id=oObj dir=ltr class=testClass version="4.0"> |
| 컬렉션 | 설명과 예제 코드 | 결과 | 참고 |
|---|---|---|---|
| all | 개체에 포함되어 있는 모든 엘레멘트들의 배열변수를 참조하고 반환한다. | ||
| <SCRIPT>document.write(oObj.all.length)</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> 단추를 클릭하고 색상을 확인하라. |
||
| <BUTTON onclick="oObj.runtimeStyle.color='black'">검정색으로</BUTTON> | ||
| style | 개체의 현재 모든 가능한 인라인 스타일 설정들을 참조한다. | |
| <SCRIPT>document.write(oObj.style.cssText.length))</SCRIPT> | ||
| style | script |
|---|---|
| {background:val} | obj.style.background[=val] |
| ⇒ 개체의 배경 속성들을 5개까지 반환하거나 설정한다. | |
| {background-attachment:val} | obj.style.backgroundAttachment[=val] |
| ⇒ 문서 속의 배경 이미지를 개체에 배열 방식을 반환하거나 설정한다. | |
| {background-color:val} | obj.style.backgroundColor[=val] |
| ⇒ 개체의 배경에 깔리는 색상을 반환하거나 설정한다. | |
| {background-image:val} | obj.style.backgroundImage[=val] |
| ⇒ 개체의 배경 이미지를 반환하거나 설정한다 . | |
| {background-position:val} | obj.style.backgroundPosition[=val] |
| ⇒ 개체의 배경 이미지의 위치를 반환하거나 설정한다. | |
| {background-repeat:val} | obj.style.backgroundRepeat[=val] |
| ⇒ 개체 backgroundImage 속성의 반복 방식을 반환하거나 설정한다. | |
| {behavior:val} | obj.style.behavior[=val] |
| ⇒ DHTML behavior의 소개 위치를 반환하거나 설정한다. | |
| {color:val} | obj.style.color[=val] |
| ⇒ 개체의 글자 색상을 반환하거나 설정한다. | |
| {cursor:val} | obj.style.cursor[=val] |
| ⇒ 개체위에서 마우스 포인터의 보이는 형태를 반환하거나 설정한다. | |
| {display:val} | obj.style.display[=val] |
| ⇒ 개체를 디스플레이할 것인가를 반환하거나 설정한다. | |
| {font:val} | obj.style.font[=val] |
| ⇒ 개체의 font 속성들 조합하여 반환하거나 설정하거나, 사용자 선호 글꼴들을 6개까지 반환하거나 설정한다. | |
| {font-family:val} | obj.style.fontFamily[=val] |
| ⇒ 사용한 글꼴의 이름들을 반환하거나 설정한다. | |
| {font-size:val} | obj.style.fontSize[=val] |
| ⇒ 개체 텍스트에서 사용한 글꼴의 크기를 나타내는 수치를 반환하거나 설정한다. | |
| {font-style:val} | obj.style.fontStyle[=val] |
| ⇒ 개체의 글꼴 형태을 italic, normal, oblique등으로 반환하거나 설정한다. | |
| {font-variant:val} | obj.style.fontVariant[=val] |
| ⇒ 개체의 문자를 작은 대문자들로 변형할 것인가를 반환하거나 설정한다. | |
| {font-weight:val} | obj.style.fontWeight[=val] |
| ⇒ 개체의 글꼴 두께를 반환하거나 설정한다. | |
| {letter-spacing:val} | obj.style.letterSpacing[=val] |
| ⇒ 개체 속에서 글자들 사이의 간격을 반환하거나 설정한다. | |
| {line-height:val} | obj.style.lineHeight[=val] |
| ⇒ 개체 속에서 줄과 아래줄과의 거리를 반환하거나 설정한다. | |
| {overflow:val} | obj.style.overflow[=val] |
| ⇒ 개체의 내용이 높이나 너비를 초과하였을 때 어떻게 처리할 것인가를 나타내는 값을 반환하거나 설정한다. | |
| {overflow-x:val} | obj.style.overflowX[=val] |
| ⇒ 개체의 내용이 너비를 초과하였을 때 그 내용을 어떻게 처리할 것인가를 나타니는 값을 반환하거나 설정한다. | |
| {overflow-y:val} | obj.style.overflowY[=val] |
| ⇒ 개체의 내용이 높이를 초과하였을 때 그 내용을 어떻게 처리할 것인가를 나타니는 값을 반환하거나 설정한다. | |
| {text-autospace:val} | obj.style.textAutospace[=val] |
| ⇒ 조정된 문자를 위한 자동 문자 간격 맞추기를 반환하거나 설정한다. | |
| {text-decoration:val} | obj.style.textDecoration[=val] |
| ⇒ 개체 속의 문자 장식(깜박거림, 중간줄, 윗줄, 아랫줄)을 반환하거나 설정한다. | |
| 없슴 | obj.style.textDecorationBlink[=val] |
| ⇒ 개체의 textDecoration 속성값이 'blink'로 설정되었는가를 부울값으로 반환하거나 설정한다. | |
| 없슴 | obj.style.textDecorationLineThrough[=val] |
| ⇒ 개체의 textDecoration 속성값이 'line-through'로 설정되었는가를 부울값으로 반환하거나 설정한다. | |
| 없슴 | obj.style.textDecorationNone[=val] |
| ⇒ 개체의 textDecoration 속성값이 'none'로 설정되었는가를 부울값으로 반환하거나 설정한다. | |
| 없슴 | obj.style.textDecorationOverline[=val] |
| ⇒ 개체의 textDecoration 속성값이 'overline'로 설정되었는가를 부울값으로 반환하거나 설정한다. | |
| 없슴 | obj.style.textDecorationUnderline[=val] |
| ⇒ 개체의 textDecoration 속성값이 'underline'로 설정되었는가를 부울값으로 반환하거나 설정한다. | |
| {text-transform:val} | obj.style.textTransform[=val] |
| ⇒ 개체 속에서 문자의 변환 표현 방식을 반환하거나 설정한다. | |
| {text-underline-position:val} | obj.style.textUnderlinePosition[=val] |
| ⇒ 개체의 textDecoration 속성이 'underline'로 설정된 경우 밑줄의 위치를 반환하거나 설정한다. | |
| {visibility:val} | obj.style.visibility[=val] |
| ⇒ 개체의 내용이 디스플레이될 것인가를반환하거나 설정한다. | |
| {word-spacing:val} | obj.style.wordSpacing[=val] |
| ⇒ 개체 속에서 단어간의 간격을 증가시키는 정도를 반환하거나 설정한다. | |
| {word-wrap:val} | obj.style.wordWrap[=val] |
| ⇒ 내용이 용기 개체의 범위를 초과하면 단어를 자를 것인가를 반환하거나 설정한다. | |
| 메서드 | 설명 |
|---|---|
| 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 | 개체의 모든 애트리뷰트들과 값들을 삭제한다. |
| 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 개체를 반환한다. |
| getElementsByTagName | 지정된 엘레멘트의 이름에 맞는 개체들의 컬렉션을 반환한다. |
| hasChildNodes | 개체가 자식개체를 가지고 가지고 있는가를 나타내는 값을 반환한다. |
| insertAdjacentElement | 지정한 위치에 엘레멘트를 삽입한다. |
| insertBefore | 문서 계통도에서 모체 개체의 자식 노드로 엘레멘트를 삽입한다. |
| mergeAttributes | 지정된 개체에 모든 읽기/쓰기 애트리뷰트를 복사한다. |
| normalize | IE6 개체의 인접 TextNode 개체를 통합하여 문서 개체 모델을 정상화한다. |
| removeAttribute | 개체로 부터 애트리뷰트를 제거한다. |
| removeAttributeNode | IE6 개체로 부터 애트리뷰트 개체 노드를 제거한다. |
| removeBehavior | 개체로부터 behavior를 제거한다. |
| removeChild | 개체로부터 자식 노드를 제거한다. |
| removeNode | 문서 계통도에서 개체를 제거한다. |
| replaceAdjacentText | 개체에 인접 문자열을 교체한다. |
| replaceChild | 현재의 자식 엘레멘트를 새로운 자식 엘레멘트로 교체한다. |
| replaceNode | 개체를 다른 엘레멘트로 교체한다. |
| setAttribute | 지정된 애트리뷰트를 설정한다. |
| setAttributeNode | IE6 개체의 부분으로 애트리뷰트 개체 노드를 설정한다. |
| swapNode | 문서 계통도에서 두 개체의 위치를 서로 바꾼다. |
| 이벤트 | 설명 |
|---|---|
| onlayoutcomplete | 원본 문서로부터 내용을 현재의 LayoutRect 개체에 채워넣기가 끝나고 인쇄하거나 인쇄미리보기를 실행하면 발생된다. |
| onmouseenter | 마우스 포인터가 개체 위로 이동하면 발생한다. |
| onmouseleave | 마우스 포인터가 개체 밖으로 이동하면 발생한다. |
| onreadystatechange | 개체의 준비상태(readyState) 속성을 변경시키면 발생한다. |
| Behavior | 설명 |
|---|---|
| clientCaps | Explorer에 대한 정보를 제공하고 요청에 의하여 브라우저의 콤포넨트를 설치하는 방법늘 제공한다. |
| download | 파일을 다운로드하고 완료되면 완료를 알려주는 기능을 갖고있다. |
| homePage | 사용자의 홈페이지에 대한 정보를 포함하고 있다. |
개체에서 TABLE 개체를 찾는 예제
<SCRIPT>
str='document.all.tags("html")[0].id='+document.all.tags('html')[0].id+'<BR>';
htmlTableCol=document.all.tags('html')[0].all.tags('table');
for (i=0;i< htmlTableCol.length;i++){
str+='htmlTableCol('+i+').nodeName='+htmlTableCol(i).nodeName+' .cells.length='+htmlTableCol(i).cells.length+'<BR>';
}
document.write(str);
</SCRIPT>