JavaScript DOM 연산 형태와 스타일_기본지식

1가지 운영형태

태그는 HTML에서 가장 복잡한 구조입니다. DOM을 통해 생성하고 HTMLDOM을 통해 작동할 수 있습니다.

// 使用DOM来创建表格;
 var table = document.createElement('table');
 table.border = 1;
 table.width = 300;

 var caption = document.createElement('caption');
 table.appendChild(caption);
 caption.appendChild(document.createTextNode('人员表'));

 var thead = document.createElement('thead');
 table.appendChild(thead);

 var tr = document.createElement('tr');
 thead.appendChild(tr);

 var th1 = document.createElement('th');
 var th2 = document.createElement('th');

 tr.appendChild(th1);
 th1.appendChild(document.createTextNode('姓名'));
 tr.appendChild(th2);
 th2.appendChild(document.createTextNode('年龄'));

 document.body.appendChild(table);

// 테이블이 복잡하고 여러 레벨로 구성되어 있어 특정 요소를 얻기 위해 이전 DOM을 사용하는 것은 번거로울 수 있으므로 HTMLDOM을 사용하는 것이 좋습니다. HTMLDOM 속성 및 메서드 소개
속성 또는 메서드 설명
caption에는
요소에 대한 참조가 있습니다. tBodies는

요소의 HTMLCollection을 보유합니다.
tFoot는
요소에 대한 참조를 보유합니다. tHead는
요소에 대한 참조를 보유합니다. 행에는 요소의 HTMLCollection이 있습니다.
createTHead()는 참조를 반환합니다. createTFoot()는 요소를 생성하고 참조
를 반환합니다. createCpation()은 요소를 삭제합니다.
deleteTFoot()는
요소를 삭제합니다. deleteCaption()은 요소에 추가된 속성 및 메소드

행은 요소의 HTMLCollection을 보유합니다.

deleteRow(pos)는 지정된 위치의 행을 삭제합니다.
insertRow(pos)는 행 컬렉션의 지정된 위치에 행을 삽입합니다.

요소에 추가된 속성 및 메소드

셀은 요소에 있는 셀의 HTMLCollection 컬렉션을 보유합니다.

deleteCell(pos)는 지정된 위치의 셀을 삭제합니다.
insertCell(pos)은 셀 컬렉션의 지정된 위치에 셀을 삽입하고 참조를 반환합니다.

//HTMLDOM은 테이블의

및 는 테이블에 하나만 있을 수 있습니다. // 그리고 는 고유하지 않으며 여러 개가 될 수 있습니다. 따라서 최종적으로 반환된 는 요소의 컬렉션입니다.

2가지 작전 스타일

CSS는 (X)HTML의 보조 기능으로 페이지 표시 효과를 향상시킬 수 있지만 모든 브라우저가 최신 CSS 기능을 지원할 수 있는 것은 아닙니다. CSS 기능은 DOM 수준과 밀접한 관련이 있으므로 현재 브라우저에서 지원하는 CSS 기능 수준을 감지해야 합니다. HTML에서 스타일을 정의하는 방법에는 세 가지가 있습니다.

(1) 특정 요소의 스타일을 정의하려면 스타일 속성을 사용하세요. (2)

요소를 생성하고 참조
를 반환합니다. deleteTHead()는

요소를 삭제합니다.
deleteRow(pos)는 지정된 행을 삭제합니다.
insertRow(pos)는 행 컬렉션의 지정된 위치에 행을 삽입합니다.

을 가져옵니다. Alert(table.caption.innerHTML); // 캡션 내용을 가져옵니다.

// 추신: