테이블의 한 컬럼의 디폴트 속성을 지정한다.
COL 엘레멘트들은 COLGROUP 엘레멘트 속에서 네스팅될 수 있다.
네스팅되면 내부 COL 엘레멘트의 애트리뷰트는 COLGROUP 애트리뷰트를 덮어씌운다.
COL과 COLGROUP 엘레멘트들은 비슷한 목적으로 사용되지만 table의 내부 구분선(rules)을 결정하기 위해서는 COLGROUP 엘레멘트를 사용하여야 한다.
table 컬럼의 갯수를 지정하기 위해서는 COLGROUP이 정의하는 span 애트리뷰트를 사용한다.
이 애트리뷰트의 디폴트 값은 1이다.
table 개체와 그 관련된 엘레멘트들은 일반 개체모델과 다른 방식의 다른 테이블 개체모델을 사용한다.
이 개체는 IE3.0에서 지원되고 스크립트는 IE4.0에서 부터 지원된다.
이 엘레멘트는 블럭모드이다.
이 엘레멘트는 종료태그를 필요로 하지 않는다.
이 개체는 HTML 4.0에서 정의되었고 (영문)DOM Level 1(W3C Document Object Model)에 정의되었다.
설명을 위한 예제
|
|||||||||
| 컬렉션 | 설명과 예제 코드 | 결과 | 참고 |
|---|---|---|---|
| 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> 단추를 클릭하고 예제의 색상을 확인하라. |
||
| 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-position-x:val} | obj.style.backgroundPositionX[=val] |
| ⇒ backgroundPosition 속성의 x 좌표를 반환하거나 설정한다. | |
| {background-position-y:val} | obj.style.backgroundPositionY[=val] |
| ⇒ backgroundPosition 속성의 y 좌표를 반환하거나 설정한다. | |
| {background-repeat:val} | obj.style.backgroundRepeat[=val] |
| ⇒ 개체 backgroundImage 속성의 반복 방식을 반환하거나 설정한다. | |
| {behavior:val} | obj.style.behavior[=val] |
| ⇒ DHTML behavior의 소개 위치를 반환하거나 설정한다. | |
| {clear:val} | obj.style.clear[=val] |
| ⇒ 개체에서 부동(float)부분의 면의 왼쪽, 오른쪽 혹은 양쪽으로 표현이 허용하는가를 반환하거나 설정한다. | |
| {color:val} | obj.style.color[=val] |
| ⇒ 개체의 글자 색상을 반환하거나 설정한다. | |
| {cursor:val} | obj.style.cursor[=val] |
| ⇒ 개체위에서 마우스 포인터의 보이는 형태를 반환하거나 설정한다. | |
| {direction:val} | obj.style.direction[=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] |
| ⇒ 개체의 글꼴 두께를 반환하거나 설정한다. | |
| {layout-grid:val} | obj.style.layoutGrid[=val] |
| ⇒ 문자들의 레이아웃을 지정하는 문서 그리드(grid) 속성들을 일괄적으로 반환하거나 설정한다. | |
| {layout-grid-mode:val} | obj.style.layoutGridMode[=val] |
| ⇒ 텍스트 레이아웃 그리드에 가로, 세로가 사용되었는가를 반환하거나 설정한다 | |
| {letter-spacing:val} | obj.style.letterSpacing[=val] |
| ⇒ 개체 속에서 글자들 사이의 간격을 반환하거나 설정한다. | |
| {line-height:val} | obj.style.lineHeight[=val] |
| ⇒ 개체 속에서 줄과 아래줄과의 거리를 반환하거나 설정한다. | |
| {overflow:val} | obj.style.overflow[=val] |
| ⇒ 개체의 내용이 높이나 너비를 초과하였을 때 어떻게 처리할 것인가를 나타내는 값을 반환하거나 설정한다. | |
| {padding:val} | obj.style.padding[=val] |
| ⇒ 개체들 사이, 그들에 소속된 마진, 보더까지의 간격을 반환하거나 설정한다. | |
| {padding-bottom:val} | obj.style.paddingBottom[=val] |
| ⇒ 개체의 아래쪽 보더와 내용 사이의 간격을 반환하거나 설정한다. | |
| {padding-left:val} | obj.style.paddingLeft[=val] |
| ⇒ 개체의 왼쪽 보더와 내용 사이의 간격을 반환하거나 설정한다. | |
| {padding-right:val} | obj.style.paddingRight[=val] |
| ⇒ 개체의 오른쪽 보더와 내용 사이의 간격을 반환하거나 설정한다. | |
| {padding-top:val} | obj.style.paddingTop[=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-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'로 설정된 경우 밑줄의 위치를 반환하거나 설정한다. | |
| {unicode-bidi:val} | obj.style.unicodeBidi[=val] |
| ⇒ 양방향 알고리즘에 관한 깔린 수준을 반환하거나 설정한다. | |
| {vertical-align:val} | obj.style.verticalAlign[=val] |
| ⇒ 개체의 수직 정렬 방식을 반환하거나 설정한다. | |
| {visibility:val} | obj.style.visibility[=val] |
| ⇒ 개체의 내용이 디스플레이될 것인가를반환하거나 설정한다. | |
| {word-spacing:val} | obj.style.wordSpacing[=val] |
| ⇒ 개체 속에서 단어간의 간격을 증가시키는 정도를 반환하거나 설정한다. | |
| {z-index:val} | obj.style.zIndex[=val] |
| ⇒ 위치가 정해져 있는 개체의 스택킹(위에서 보이는) 순서를 반환하거나 설정한다. | |
| {zoom:val} | obj.style.zoom[=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 개체를 반환한다. |
| getBoundingClientRect | TextRectangle 개체들의 컬렉션에 연결됨을 지정하는 개체를 반환한다. |
| getClientRects | 개체의 내용이나 클라이언트 범위(range)의 배치(layout)를 기술하는 사각형(rectangle)들의 컬렉션을 반환한다. 각 사각형은 한 줄이다. |
| getElementsByTagName | 지정된 엘레멘트의 이름에 맞는 개체들의 컬렉션을 반환한다. |
| getExpression | 주어진 속성의 표현(expression)을 반환한다. |
| hasChildNodes | 개체가 자식개체를 가지고 가지고 있는가를 나타내는 값을 반환한다. |
| insertAdjacentElement | 지정한 위치에 엘레멘트를 삽입한다. |
| insertBefore | 문서 계통도에서 모체 개체의 자식 노드로 엘레멘트를 삽입한다. |
| mergeAttributes | 지정된 개체에 모든 읽기/쓰기 애트리뷰트를 복사한다. |
| normalize | IE6 개체의 인접 TextNode 개체를 통합하여 문서 개체 모델을 정상화한다. |
| removeAttribute | 개체로 부터 애트리뷰트를 제거한다. |
| removeAttributeNode | IE6 개체로 부터 애트리뷰트 개체 노드를 제거한다. |
| removeBehavior | 개체로부터 behavior를 제거한다. |
| removeChild | 개체로부터 자식 노드를 제거한다. |
| removeExpression | 지정한 속성으로부터 표현(expression)을 제거한다. |
| removeNode | 문서 계통도에서 개체를 제거한다. |
| replaceAdjacentText | 개체에 인접 문자열을 교체한다. |
| replaceChild | 현재의 자식 엘레멘트를 새로운 자식 엘레멘트로 교체한다. |
| replaceNode | 개체를 다른 엘레멘트로 교체한다. |
| scrollIntoView | 개체를 보기게 굴림(scroll)하고 윈도우의 맨위나 아래에 정렬한다. |
| setAttribute | 지정된 애트리뷰트를 설정한다. |
| setAttributeNode | IE6 개체의 부분으로 애트리뷰트 개체 노드를 설정한다. |
| setExpression | 지정된 개체의 표현(expression)을 설정한다. |
| swapNode | 문서 계통도에서 두 개체의 위치를 서로 바꾼다. |
| 이벤트 | 설명 |
|---|---|
| onlayoutcomplete | 원본 문서로부터 내용을 현재의 LayoutRect 개체에 채워넣기가 끝나고 인쇄하거나 인쇄미리보기를 실행하면 발생된다. |
| onreadystatechange | 개체의 준비상태(readyState) 속성을 변경시키면 발생한다. |
| Behavior | 설명 |
|---|---|
| clientCaps | Explorer에 대한 정보를 제공하고 요청에 의하여 브라우저의 콤포넨트를 설치하는 방법늘 제공한다. |
| download | 파일을 다운로드하고 완료되면 완료를 알려주는 기능을 갖고있다. |
| homePage | 사용자의 홈페이지에 대한 정보를 포함하고 있다. |