[javascript] 문서객체모델(DOM) 생성 및 제거

문서객체모델은 웹브라우저가 HTML페이지를 인식하는 방식이라고 책에 쓰여져 있습니다.

저는 이 내용을 이해하지 못해 그냥 HTML에서 문서객체를 다루는 방식으로 해석하겠습니다.

 

문서객체는 자바스크립트 상에서 요소의 값을 가져와서 객체에 대입하였을 때 해당 객체를 문서객체라고 합니다.

 

Colored By Color Scripter™

1	var targets = document.getElementById('targets');

위에 보시는 것처럼 targets는 하나의 문서객체입니다.

 

 

요소는 요소노드와 텍스트노드가 존재합니다.

요소노드는 <table>,<h1>,<div>같은 태그의 이름인 table, h1, div를 지칭합니다.

텍스트노드는 실제적으로 텍스트형태의 값을 지니는 노드를 뜻 합니다. 예를 들어 <h1>춘이</h1> 같이 '춘이'라는 값이 하나의 텍스트 노드입니다.

 

 

 

 

>문서객체의 생성과 제거 함수

함수이름	설명
createElement(생성할 요소노드명);	요소노드를 생성함
createTextNode(생성할 텍스트노드값);	텍스트노드를 생성함
appendChild(연결시킬 요소노드나 텍스트노드);	객체에 노드를 추가 연결함
removeChild(삭제할 노드명);	객체에 연결된 노드를 삭제함

 

 

위 표는 문서객체의 생성과 제거 함수입니다.

그럼 문서객체를 생성해 보겠습니다.

문서객체를 생성할 때는 생성만 한다고 되는 것이 아닙니다. 생성을하고 이미 HTML상에 존재하는 문서객체와의 연결을 시켜줘야 됩니다.

 

 

Colored By Color Scripter™

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

<script>         function add() {             var tables = document.createElement('table');   //table태그요소노드 생성             tables.setAttribute('id', 'target');   //table태그요소에 id 속성을 붙여줌(선택사항)             var trs = document.createElement('tr');   //tr태그요소노드 생성             var tds = document.createElement('td');   //td태그요소노드 생성             var textNode = document.createTextNode('저는 현재 백수입니다.');   //텍스트노드 생성             tables.appendChild(trs).appendChild(tds).appendChild(textNode);   //table요소노드에 나머지 연결시킴              //여기까지 코딩한다고 해서는 아무것도 안나온다.                 document.body.appendChild(tables);                   //기존에 html문서안에서 상주하고 있는 body요소 노드에 tables요소를 연결시켜 줘야한다.         }             function remove() {             var target = document.getElementById('target');             target.parentNode.removeChild(target);              //일반적으로 문서객체를 삭제할 때 사용하는 방법           }     </script>

위에 이어서 html코드

Colored By Color Scripter™

1 2	<a href="javascript:add();">보여주기</a> <a href="javascript:remove();">사라지기</a>

 

위에 코드를 실행시키면 '보여주기'를 클릭시 '저는 현재 백수입니다'라는 하나의 테이블요소가 브라우저에 표시됩니다. 사라지기를 누르면 생성된 테이블 요소는 사라집니다.

위 코드로 게시판에서 파일텀부 갯수 조절을 위한 코드같은 것을 짜볼 수도 있을 것 같습니다.