소개 이 글에서는 DOM 1.0의 몇 가지 기본적이고 강력한 메소드와 이를 JavaScript에서 사용하는 방법을 간략하게 소개합니다. HTML 요소를 동적으로 생성, 검색, 제어 및 삭제하는 방법을 배울 수 있습니다. 이러한 DOM 메서드는 XML에도 적용됩니다. DOM 1.0을 완벽하게 지원하는 모든 브라우저(IE5, Firefox 등)에서 이 기사의 예제를 잘 실행할 수 있습니다.
개요 - Sample1.html 이 기사에서는 예제 코드를 통해 DOM을 소개합니다. 먼저 아래 HTML 예제를 시도해 보세요. DOM 1 메소드를 사용하여 JavaScript에서 HTML 테이블을 동적으로 생성합니다. 텍스트 내용을 포함하는 4개의 셀로 구성된 작은 테이블을 만듭니다. 셀의 텍스트 내용은 "The cell is the yth row and the xth Column"입니다. 이는 테이블에 있는 셀의 행과 열 수를 나타냅니다.
head>
예제 코드 - JavaScript 및 DOM을 사용하여 HTML 테이블 만들기
<script> <br>function start() { <br>//body 태그 가져오기<br> var mybody = document.getElementsByTagName("body")[0]; <br><br>// <table> 요소 및 <tbody> 요소 생성 <br>mytable = document.createElement("table") ; <br>mytablebody = document.createElement("tbody"); <br><br>//모든 셀 생성<br>for(var j = 0; j < 2; j ) { <BR>// 생성 a <tr>Element<br>mycurrent_row = document.createElement("tr"); <br>for(var i = 0; i < 2; i ) { <BR>// <td>요소 만들기 <br>mycurrent_cell = document.createElement("td"); <br>//텍스트 노드 생성<br>currenttext = document.createTextNode("셀은 "j"번째 행, "i"번째 열입니다.") ; <br>// <br>mycurrent_cell.appendChild(currenttext)에 생성된 텍스트 노드를 추가합니다. <br>// <br>mycurrent_row.appendChild 열에 <td> mycurrent_cell); <br>// <tbody>에 행 추가 <br>} <br>// <tbody> table> <br>mytable.appendChild(mytablebody);//<body> <br>mybody.appendChild(mytable)에 추가// 테두리 속성은 다음과 같습니다. 2로 설정 <br>mytable.setAttribute("border", "2") <br></script>