찾다

집  >  기사  >  웹 프론트엔드  >  JavaScript와 DOM을 결합하여 동적으로 테이블 인스턴스 생성_기본 지식

JavaScript와 DOM을 결합하여 동적으로 테이블 인스턴스 생성_기본 지식

WBOY
WBOY원래의
2016-05-16 17:45:501611검색
소개
이 글에서는 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 테이블 만들기<br><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> <br></head> <br><body onload=" start( )"> <br></body> <br></html> <br><br><br><br><strong>요소와 텍스트 노드를 만드는 순서에 유의하세요</strong>: <p>1. < table > 요소를 생성합니다. <br> 2. < table >의 하위 요소를 생성합니다. tbody > tr ><br>4. 각 < tr >에 대해 하위 요소 < ; <br>< table >, < tbody >, < tr >, < td > 요소와 텍스트 노드를 역순으로 추가합니다. <br>1. 생성된 텍스트 노드를 </p>에 추가합니다. <p>mycurrent_cell.appendChild(현재 텍스트);<br> </p>2. < td > 행을 추가합니다. <p>mycurrent_row.appendChild(mycurrent_cell);</p> <p>3. < tr > </p>mytablebody.appendChild(mycurrent_row);<p> </p>4. < 테이블 > <p>mytable.appendChild(mytablebody);</p> <p>5. 에 을 추가합니다. </p>mybody.appendChild(mytable);<p> </p>이 방법을 기억하세요. W3C DOM으로 작업할 때 이것을 자주 사용하게 될 것입니다. 먼저 위에서 아래로 요소를 작성한 다음 아래에서 위로 상위 노드에 추가합니다. <p>다음은 JavaScript 코드로 생성된 HTML입니다. </p> <p>...</p><table border=5><p><tr><td>셀은 0행, 0열</td><td>셀은 0행 0행 , 열 1</td></tr></p><tr><td>셀은 행 1, 열 0</td><td>셀은 행 1, 열 1</ td></tr><p></table><br>...</p> <p>다음은 코드에 의해 생성된 테이블 요소와 해당 하위 요소의 DOM 개체 트리입니다. <br><br><br> 이러한 테이블과 해당 하위 요소를 구성하려면 몇 가지 DOM 메소드만 사용하면 됩니다. 생성할 구성의 모델 트리를 항상 염두에 두십시오. 이렇게 하면 코드 작성이 더 쉬워집니다. 그림의 < table >에는 하위 요소 < < tbody >에는 두 개의 하위 요소가 있습니다. <tbody>(<tr>)의 각 하위 요소는 < 마지막으로 각 < td >에는 하나의 하위 요소인 텍스트 노드가 있습니다. ​<br><br></p>기본 DOM 메소드 - Sample2.html<p><br><img id="image257" alt="sample1-tabledom.jpg" src="http://files.jb51.net/file_images/article/201212/201212231429332.jpg"> getElementByTagName 메소드는 문서 및 요소에 적용되므로 문서 루트 객체는 모든 요소 객체와 동일한 getElementByTagName 메소드를 갖습니다. element.getElementsByTagName(tagname)을 사용하면 요소의 모든 하위 요소 목록을 가져오고 태그 이름을 사용하여 선택할 수 있습니다. <br>　element.getElementsByTagName은 특정 태그 이름을 가진 하위 요소 목록을 반환합니다. item 메소드를 호출하여(인덱스 매개변수 전달) 이 하위 요소 목록에서 요소를 가져올 수 있습니다. 목록의 첫 번째 하위 요소의 인덱스는 0입니다. 다음 항목에서는 이전 테이블 예제를 계속합니다. 다음 예는 더 간단하며 몇 가지 기본 방법을 보여줍니다. <br><ins datetime="2006-07-02T22:43:47"><strong></strong></ins>코드 복사<br><br><br> 코드는 다음과 같습니다.</p> <div class="codetitle"> <span> <a style="CURSOR: pointer" data="85111" class="copybut" id="copybut85111" onclick="doCopy('code85111')"><html> <u><head> </u><title>예제 코드 - JavaScript 및 DOM을 사용하여 HTML 테이블 만들기</a><script> </span>// 모든 본문 요소가 포함된 목록 가져오기(하나만 있음) </div>// 그런 다음 목록에서 첫 번째 요소를 선택합니다. <div class="codebody" id="code85111">myBody = document.getElementsByTagName("body")[0]; 🎜 ><br>//body 요소의 모든 p 요소 가져오기 <br>myBodyElements = myBody.getElementsByTagName("p") <br><br>//p 요소 목록의 두 번째 요소 가져오기(0에서 인덱스) 시작) <br>myP = myBodyElements[1]; <br></script> <br></head><br><body onload="start()"> <p>안녕하세요</p> <br></body> <br><br><br> <p>이 예에서는 myP 변수를 본문의 두 번째 p 요소를 나타내는 DOM 개체로 설정합니다. <br>1. 모든 본문 요소가 포함된 목록 가져오기</p> <p>myBody = document.getElementsByTagName("body")[0];</p> <p>유효한 HTML 문서에는 본문 요소가 하나만 있으므로 이 목록에는 항목이 하나만 있습니다. [0]을 사용하여 목록의 첫 번째 요소를 선택하여 얻습니다. <br>2. 블로그 하위 요소에서 모든 p 요소를 가져옵니다. </p> <p>myBodyElements = myBody.getElementsByTagName("p");</p> <p>3. p 요소 목록에서 두 번째 항목을 선택합니다</p> <p>myP = myBodyElements[1];</p> <p><img id="image258" alt="sample2a2.jpg" src="http://files.jb51.net/file_images/article/201212/201212231429333.jpg"><br>html 요소의 DOM 객체를 얻은 후에는 해당 속성을 설정할 수 있습니다. 예를 들어 스타일 배경색 속성을 설정하려면 다음만 추가하면 됩니다. </p> <p>myP.style.Background = "rgb(255,0,0)";</p> <p><strong> document.createTextNode("..")를 사용하여 텍스트 노드를 만듭니다. </strong><br>문서 개체를 사용하여 createTextNode 메서드를 호출하여 텍스트 노드를 만듭니다. 텍스트 내용만 입력하면 됩니다. 반환 값은 이 텍스트 노드를 나타내는 개체입니다. </p> <p>myTextNode = document.createTextNode("world");</p> <p>위 코드는 텍스트 데이터가 "word"인 TEXT_NODE 유형(텍스트 블록) 노드를 생성하고 변수 myTextNode는 이 노드 개체를 가리킵니다. 이 텍스트를 HTML 페이지에 삽입하려면 이 텍스트 노드를 다른 노드 요소의 바이트 포인트로 설정해야 합니다. <br><strong>appendChild(..)를 사용하여 요소 삽입 </strong><br>따라서 myP.appendChild([node_element])를 호출하여 이 텍스트 노드를 두 번째 p 요소의 바이트 포인트로 설정합니다. </p> <p>myP.appendChild(myTextNode);</p> <p>이 예를 테스트하여 "hello"와 "world"라는 단어가 "helloworld"로 결합되어 있음을 확인하세요. 따라서 html 페이지를 보면 hello와 world라는 두 개의 텍스트 노드가 하나의 노드인 것처럼 보이지만 실제로 이 문서 모델에는 두 개의 노드가 있습니다. 두 번째 노드는 새로운 TEXT_NODE 유형 노드이며 두 번째 p 태그의 두 번째 바이트 포인트입니다. 아래 이미지는 문서 트리에서 방금 생성된 텍스트 노드를 보여줍니다. <br><img id="image259" alt="sample2b2.jpg" src="http://files.jb51.net/file_images/article/201212/201212231429334.jpg"></p> <p>createTextNode 및 AppendChild는 hello와 world 사이에 공백을 추가하는 간단한 방법입니다. hello 다음에 world가 추가되는 것처럼,appendChild 메소드는 마지막 자식 노드 뒤에 추가된다는 점에 유의하는 것이 중요합니다. 따라서 hello와 world 사이에 텍스트 노드를 추가하려면 appendChild 대신 insertBefore 메소드를 사용해야 합니다. </p> <p><strong>문서 개체와 createElement(..) 메서드를 사용하여 새 요소를 만듭니다. </strong><br> createElement 메서드를 사용하여 새 HTML 요소나 원하는 다른 요소를 만들 수 있습니다. 예를 들어 < body > 요소 < p > 요소에 바이트 포인트를 추가하려는 경우 이전 예에서 myBody를 사용하여 새 요소 노드를 추가할 수 있습니다. 노드를 생성하려면 document.createElement("tagname")를 호출하면 됩니다. 예: </p> <p>myNewPTAGnode = document.createElement("p");<br>myBody.appendChild(myNewPTAGnode);</p> <p><img id="image260" alt="sample2c.jpg" src="http://files.jb51.net/file_images/article/201212/201212231429335.jpg"><br><strong>removeChild(..) 메소드를 사용하여 노드를 삭제하세요. </strong><br> 각 노드를 삭제할 수 있습니다. 다음 코드 줄은 myP(두 번째 < p > 요소)에서 world라는 단어가 포함된 텍스트 노드를 삭제합니다. </p> <p>myP.removeChild(myTextNode);</p> <p> 마지막으로 world라는 단어가 포함된 텍스트 노드 myTextNode를 새로 생성된 < p > </p>myNewPTAGnode.appendChild(myTextNode);<p> </p> 수정된 개체 트리는 최종적으로 다음과 같습니다. <p><br><img id="image261" alt="sample2d.jpg" src="http://files.jb51.net/file_images/article/201212/201212231429336.jpg"><br><ins datetime="2006-07-02T22:50:58">동적으로 테이블 생성(Sample1.html로 돌아가기) <strong></strong></ins> 나머지 기사는 Sample1.html로 돌아갑니다. 다음 그림은 예제에서 생성된 테이블의 객체 트리 구조를 보여줍니다. <br><br>HTML 테이블 구조 검토<strong></strong><br><img id="image257" alt="sample1-tabledom.jpg" src="http://files.jb51.net/file_images/article/201212/201212231429332.jpg"><br>요소 노드를 생성하여 문서 트리에 추가<strong></strong>샘플1의 테이블 생성 기본 사항 .html 단계: <br> 본문 개체(문서 개체의 첫 번째 항목)를 가져옵니다. 마지막으로 위의 테이블 구조에 따라 각 바이트 포인트를 추가합니다. 아래 소스 코드는 샘플1.html의 설명입니다. </p>start 함수 끝에는 또 다른 DOM 메서드인 setAttribute를 사용하여 테이블의 테두리 속성을 설정하는 새로운 코드 줄이 있습니다. setAttribute 메소드에는 속성 이름과 속성 값이라는 두 개의 매개변수가 있습니다. setAttribute 메소드를 사용하여 모든 요소의 속성을 설정할 수 있습니다. <p><br></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="63084" class="copybut" id="copybut63084" onclick="doCopy('code63084')">코드 복사<u></u></a> 코드는 다음과 같습니다.</span><div class="codebody" id="code63084"> <br><head> <br><title>예제 코드 - JavaScript 및 DOM을 사용하여 HTML 테이블 만들기<br><script> <br>function start() { <br> / / 본문 가져오기 <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> // <tr> 요소 생성 <br>mycurrent_row = document.createElement("tr") <br><br>for(var i = 0; i < 2; i ) { <br> // 생성 <td> 요소 <br>mycurrent_cell = document.createElement("td"); <br>// 텍스트 노드 생성<br>currenttext = document.createTextNode("셀은 "j" 행입니다. " 열");// 생성된 텍스트 노드를 <td> 요소에 추가합니다. <br>mycurrent_cell.appendChild(currenttext)// <tr>Row<br>mycurrent_row.appendChild(mycurrent_cell); <br>} <br>// <tbody> <br>mytablebody.appendChild(mycurrent_row)에 <tr> 라인 추가 <br><br>/ / <tbody>를 <br>mytable.appendChild(mytablebody) <br>에 추가합니다.// <br>mybody.appendChild(mytable)에 <table>을 추가합니다. / mytable의 테두리 속성을 2로 설정합니다. <br>} <br></head> ;body onload="start()"> <br></body> <br></html> DOM 및 CSS 처리 테이블 <br><br><br><br> table <br><br> 이 예에서는 두 가지 새로운 DOM 속성을 소개합니다. 먼저 mycel의 바이트 포인트 목록을 얻으려면 childNodes 속성을 사용하십시오. 이 childNodes 목록에는 이름 및 유형에 관계없이 모든 바이트 노드가 포함됩니다. getElementsByTagName 메소드와 마찬가지로 바이트 포인트 목록을 반환하며 [ x ]를 사용하여 원하는 바이트 포인트 항목을 가져옵니다. 이 예에서는 myceltext를 테이블의 두 번째 행의 두 번째 셀에 텍스트 노드로 저장합니다. 마지막으로 myceltext의 데이터 속성을 포함하는 새 텍스트 노드를 생성하고 이를 < body > 요소의 하위 요소로 만들어 이 예제의 최종 결과를 표시합니다. <br> <br>객체가 텍스트 노드인 경우 데이터 속성을 사용하여 해당 콘텐츠를 가져올 수 있습니다. </div> <br><ins datetime="2006-07-02T22:50:58"><strong></strong>코드 복사 </ins><br><strong> 코드 </strong><br>mybody = document.getElementsByTagName("body")[0]; <p>mytable = mybody.getElementsByTagName("table")[0] <br>mytablebody = mytable .getElementsByTagName(" tbody")[0]; </p> <div class="codetitle">myrow = mytablebody.getElementsByTagName("tr")[1]; <span>mycel = myrow.getElementsByTagName("td")[1]; >// mycel 바이트 포인트 목록의 첫 번째 항목 <a style="CURSOR: pointer" data="2605" class="copybut" id="copybut2605" onclick="doCopy('code2605')">myceltext=mycel.childNodes[0] <u></u>//currenttext의 내용은 myceltext의 데이터입니다. </a>currenttext=document.createTextNode( myceltext.data); </span>mybody.appendChild(currenttext); </div> <div class="codebody" id="code2605"> <br><br><br>속성 값 가져오기<br><br> 다음과 같은 셀이 있습니다. mytable 객체의 setAttribute 메소드를 사용합니다. 이 셀은 이 테이블의 테두리 속성을 설정하는 데 사용됩니다. 이 속성을 얻으려면 getAttribute 메소드를 사용하십시오: <br> <br>mytable.getAttribute("border");<br> <br><br>스타일 속성을 변경하여 열 숨기기 <br><br> JavaScript 변수를 사용하여 개체를 가리키면 스타일 속성을 즉시 설정할 수 있습니다. 다음 코드는 Sample1.html을 수정한 것입니다. 두 번째 열의 셀은 숨겨지고, 첫 번째 열의 셀 배경은 빨간색으로 변경됩니다. 스타일 속성은 직접 설정됩니다. <br><br> </div> <br><strong>코드 복사</strong><br> 코드는 다음과 같습니다.<p></p> <div class="codebody" id="code84043"> <br><html> <br><body onload="start()"> <br></body> <br><script> >var mybody =document.getElementsByTagName("body")[0]; <br>mytable = document.createElement("table"); <br>mytablebody = document.createElement("tbody"); for(var j = 0; j < 2; j ) { <br>mycurrent_row=document.createElement("tr") <br>for(var i = 0; i < 2; i ) { <br> mycurrent_cell = document.createElement("td"); <br>currenttext = document.createTextNode("셀은 다음과 같습니다: " i j) <br>mycurrent_cell.appendChild(currenttext); 🎜>// 0열에 셀 배경색을 설정하는 경우<br>// 1열에 셀을 숨기는 경우<br>if (i == 0) { <br>mycurrent_cell.style.Background = "rgb( 255, 0,0)"; <br>} else { <br>mycurrent_cell.style.display = "none"; <br>} <br>} <br>mytablebody.appendChild(mycurrent_row); <br>} <br> mytable.appendChild(mytablebody); <br><br>} <br></script> <br><br><br> </div> </div> </div> </div></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>성명：</span><div>본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.</div></div></div><div class="nphpSytBox"><span>이전 기사：<a class="dBlack" title="간단한 접이식 및 확장 가능한 디렉토리 구현 코드_탐색 메뉴" href="http://m.php.cn/ko/faq/18264.html">간단한 접이식 및 확장 가능한 디렉토리 구현 코드_탐색 메뉴</a></span><span>다음 기사：<a class="dBlack" title="간단한 접이식 및 확장 가능한 디렉토리 구현 코드_탐색 메뉴" href="http://m.php.cn/ko/faq/18266.html">간단한 접이식 및 확장 가능한 디렉토리 구현 코드_탐색 메뉴</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>관련 기사</h2><em><a href="http://m.php.cn/ko/article.html" class="bBlack"><i>더보기</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-5902227090019525" data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/ko/faq/1609.html" title="Bootstrap 목록 그룹 구성 요소에 대한 심층 분석" class="aBlack">Bootstrap 목록 그룹 구성 요소에 대한 심층 분석</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ko/faq/1640.html" title="JavaScript 함수 커링에 대한 자세한 설명" class="aBlack">JavaScript 함수 커링에 대한 자세한 설명</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ko/faq/1949.html" title="JS 비밀번호 생성 및 강도 감지의 전체 예(데모 소스 코드 다운로드 포함)" class="aBlack">JS 비밀번호 생성 및 강도 감지의 전체 예(데모 소스 코드 다운로드 포함)</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ko/faq/2248.html" title="Angularjs는 WeChat UI(weui)를 통합합니다." class="aBlack">Angularjs는 WeChat UI(weui)를 통합합니다.</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ko/faq/2351.html" title="JavaScript를 사용하여 중국어 번체와 중국어 간체 간을 빠르게 전환하는 방법과 중국어 간체와 중국어 번체 간 전환을 지원하는 웹사이트의 요령_javascript 기술" class="aBlack">JavaScript를 사용하여 중국어 번체와 중국어 간체 간을 빠르게 전환하는 방법과 중국어 간체와 중국어 번체 간 전환을 지원하는 웹사이트의 요령_javascript 기술</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！</p></div><div class="footermid"><a href="http://m.php.cn/ko/about/us.html">회사 소개</a><a href="http://m.php.cn/ko/about/disclaimer.html">부인 성명</a><a href="http://m.php.cn/ko/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了，就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body></html>