1. < table > 요소를 생성합니다.
2. < table >의 하위 요소를 생성합니다. tbody > tr >
4. 각 < tr >에 대해 하위 요소 < ;
< table >, < tbody >, < tr >, < td > 요소와 텍스트 노드를 역순으로 추가합니다.
1. 생성된 텍스트 노드를
mycurrent_cell.appendChild(현재 텍스트);
mycurrent_row.appendChild(mycurrent_cell);
3. < tr >
mytablebody.appendChild(mycurrent_row);4. < 테이블 >
mytable.appendChild(mytablebody);
5. 에 을 추가합니다.
mybody.appendChild(mytable);이 방법을 기억하세요. W3C DOM으로 작업할 때 이것을 자주 사용하게 될 것입니다. 먼저 위에서 아래로 요소를 작성한 다음 아래에서 위로 상위 노드에 추가합니다.
다음은 JavaScript 코드로 생성된 HTML입니다.
...
셀은 0행, 0열 | 셀은 0행 0행 , 열 1 |
셀은 행 1, 열 0 | 셀은 행 1, 열 1 td> |
다음은 코드에 의해 생성된 테이블 요소와 해당 하위 요소의 DOM 개체 트리입니다.
이러한 테이블과 해당 하위 요소를 구성하려면 몇 가지 DOM 메소드만 사용하면 됩니다. 생성할 구성의 모델 트리를 항상 염두에 두십시오. 이렇게 하면 코드 작성이 더 쉬워집니다. 그림의 < table >에는 하위 요소 < < tbody >에는 두 개의 하위 요소가 있습니다.
getElementByTagName 메소드는 문서 및 요소에 적용되므로 문서 루트 객체는 모든 요소 객체와 동일한 getElementByTagName 메소드를 갖습니다. element.getElementsByTagName(tagname)을 사용하면 요소의 모든 하위 요소 목록을 가져오고 태그 이름을 사용하여 선택할 수 있습니다.
element.getElementsByTagName은 특정 태그 이름을 가진 하위 요소 목록을 반환합니다. item 메소드를 호출하여(인덱스 매개변수 전달) 이 하위 요소 목록에서 요소를 가져올 수 있습니다. 목록의 첫 번째 하위 요소의 인덱스는 0입니다. 다음 항목에서는 이전 테이블 예제를 계속합니다. 다음 예는 더 간단하며 몇 가지 기본 방법을 보여줍니다.
코드 복사
코드는 다음과 같습니다.
안녕하세요
이 예에서는 myP 변수를 본문의 두 번째 p 요소를 나타내는 DOM 개체로 설정합니다.
1. 모든 본문 요소가 포함된 목록 가져오기
myBody = document.getElementsByTagName("body")[0];
유효한 HTML 문서에는 본문 요소가 하나만 있으므로 이 목록에는 항목이 하나만 있습니다. [0]을 사용하여 목록의 첫 번째 요소를 선택하여 얻습니다.
2. 블로그 하위 요소에서 모든 p 요소를 가져옵니다.
myBodyElements = myBody.getElementsByTagName("p");
3. p 요소 목록에서 두 번째 항목을 선택합니다
myP = myBodyElements[1];
html 요소의 DOM 객체를 얻은 후에는 해당 속성을 설정할 수 있습니다. 예를 들어 스타일 배경색 속성을 설정하려면 다음만 추가하면 됩니다.
myP.style.Background = "rgb(255,0,0)";
document.createTextNode("..")를 사용하여 텍스트 노드를 만듭니다.
문서 개체를 사용하여 createTextNode 메서드를 호출하여 텍스트 노드를 만듭니다. 텍스트 내용만 입력하면 됩니다. 반환 값은 이 텍스트 노드를 나타내는 개체입니다.
myTextNode = document.createTextNode("world");
위 코드는 텍스트 데이터가 "word"인 TEXT_NODE 유형(텍스트 블록) 노드를 생성하고 변수 myTextNode는 이 노드 개체를 가리킵니다. 이 텍스트를 HTML 페이지에 삽입하려면 이 텍스트 노드를 다른 노드 요소의 바이트 포인트로 설정해야 합니다.
appendChild(..)를 사용하여 요소 삽입
따라서 myP.appendChild([node_element])를 호출하여 이 텍스트 노드를 두 번째 p 요소의 바이트 포인트로 설정합니다.
myP.appendChild(myTextNode);
이 예를 테스트하여 "hello"와 "world"라는 단어가 "helloworld"로 결합되어 있음을 확인하세요. 따라서 html 페이지를 보면 hello와 world라는 두 개의 텍스트 노드가 하나의 노드인 것처럼 보이지만 실제로 이 문서 모델에는 두 개의 노드가 있습니다. 두 번째 노드는 새로운 TEXT_NODE 유형 노드이며 두 번째 p 태그의 두 번째 바이트 포인트입니다. 아래 이미지는 문서 트리에서 방금 생성된 텍스트 노드를 보여줍니다.
createTextNode 및 AppendChild는 hello와 world 사이에 공백을 추가하는 간단한 방법입니다. hello 다음에 world가 추가되는 것처럼,appendChild 메소드는 마지막 자식 노드 뒤에 추가된다는 점에 유의하는 것이 중요합니다. 따라서 hello와 world 사이에 텍스트 노드를 추가하려면 appendChild 대신 insertBefore 메소드를 사용해야 합니다.
문서 개체와 createElement(..) 메서드를 사용하여 새 요소를 만듭니다.
createElement 메서드를 사용하여 새 HTML 요소나 원하는 다른 요소를 만들 수 있습니다. 예를 들어 < body > 요소 < p > 요소에 바이트 포인트를 추가하려는 경우 이전 예에서 myBody를 사용하여 새 요소 노드를 추가할 수 있습니다. 노드를 생성하려면 document.createElement("tagname")를 호출하면 됩니다. 예:
myNewPTAGnode = document.createElement("p");
myBody.appendChild(myNewPTAGnode);
removeChild(..) 메소드를 사용하여 노드를 삭제하세요.
각 노드를 삭제할 수 있습니다. 다음 코드 줄은 myP(두 번째 < p > 요소)에서 world라는 단어가 포함된 텍스트 노드를 삭제합니다.
myP.removeChild(myTextNode);
마지막으로 world라는 단어가 포함된 텍스트 노드 myTextNode를 새로 생성된 < p >
myNewPTAGnode.appendChild(myTextNode);수정된 개체 트리는 최종적으로 다음과 같습니다.
동적으로 테이블 생성(Sample1.html로 돌아가기) 나머지 기사는 Sample1.html로 돌아갑니다. 다음 그림은 예제에서 생성된 테이블의 객체 트리 구조를 보여줍니다.
HTML 테이블 구조 검토
요소 노드를 생성하여 문서 트리에 추가샘플1의 테이블 생성 기본 사항 .html 단계:
본문 개체(문서 개체의 첫 번째 항목)를 가져옵니다. 마지막으로 위의 테이블 구조에 따라 각 바이트 포인트를 추가합니다. 아래 소스 코드는 샘플1.html의 설명입니다.