JavaScript

자바스크립트 돔(DOM)

걷는 청년 2024. 7. 24. 11:58

돔이란, 구조화된 문서(ML, tree 구조)에 접근하여 요소 및 속성 또는 텍스트를
참조, 수정, 삭제, 추가 할 수 있는 기술을 말한다. 그에 대한 실습이다.

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function abc(){
	let my = document.getElementById("my");
	console.log(my.nodeName + " " + 
			my.childNodes[0].nodeValue + " " + 
			my.firstChild.nodeValue);
	console.log(my.getAttribute("id"));
	console.log(my.getAttribute("comments"));
		
}

function def(){
	let arr = document.getElementsByTagName("input");
	console.log("arr의 크기 : ", arr.length);
	console.log(arr[0].getAttribute("value"));
	console.log(arr[1].getAttribute("value"));
}

function func(para){
	let ele = document.createElement("i");	// <i>태그 생성
	let itext = document.createTextNode(para);	// <i>안녕</i>
	ele.appendChild(itext);
	
	document.getElementById("show").appendChild(ele);
}

function clefunc(){
	let target = document.getElementById("show");
	
	//target.removeChild(target.firstChild);
	//target.removeChild(target.lastChild);
	
	while(target.hasChildNodes()){
		target.removeChild(target.childNodes[0]);
	}
}
</script>

</head>
<body>
<h1>DOM Test</h1>
<!-- 
구조화된 문서(ML, tree 구조)에 접근하여 요소 및 속성 또는 텍스트를
참조, 수정, 삭제, 추가 할 수 있는 기술
 -->
<h2 id="my" comments="이건 속성">DOM 객체 참조</h2>
<input type="button" value="id 검색" onclick="abc()"><br>
<input type="button" value="element 검색" onclick="def()"><br>
<hr>
<h1>요소 생성 및 삭제</h1>
<button onclick="func('안녕')">요소 생성1</button>
<button onclick="func('반가워')">요소 생성2</button>
<button onclick="clefunc()">요소 삭제</button>
<br>
<div id="show"></div>

</body>
</html>

 

 

최대한 나중에도 활용하기 좋도록 window.onload를 사용했다.

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
window.onload = () => {
	document.getElementById("sel").onchange = function() {
		let sangpum = comments = "";
		
		const sel = frm.sel.options[frm.sel.selectedIndex].value;
		console.log(sel);
		const sang = frm.sel.options[frm.sel.selectedIndex].text;
		console.log(sang);
		
		if(sel === '10'){
			sangpum = sang;
			comments = '클릭이 부드럽게 잘 됨';
		} else if(sel === '20'){
			sangpum = sang;
			comments = '터치감이 나이스';
		} else if(sel === '30'){
			sangpum = sang;
			comments = '화질이 우수함';
		}
		
		console.log(sangpum, ' ', comments);
		
		addRow(sangpum,comments);	// tr 추가
		
		// table에 border 속성 추가
		document.getElementById("myTable").setAttribute("border", 1);
	}
	
	// 제목 출력
	let h = document.createElement('h2');
	let t = document.createTextNode('결과는');
	h.appendChild(t);
	document.getElementById("header").appendChild(h);
	
}

function addRow(sangpum,comments){
	// <tr> 생성
	let row = document.createElement('tr');
	let col = addCol(sangpum);
	row.appendChild(col);	// <tr><td>상품명</td></tr>
	col = addCol(comments);
	row.appendChild(col);	// <tr><td>상품명</td><td>설명</td></tr>
	
	document.getElementById("myTbody").appendChild(row);
}

function addCol(para){
	// <td> 생성
	let col = document.createElement('td');
	let ctext = document.createTextNode(para);
	col.appendChild(ctext);
	return col;	// <td>값</td>
	
}



</script>

</head>
<body>
<h2>** tag 생성 관련 **</h2>
<form action="#" name="frm">
상품 선택 : 
<select name="sel" id="sel">
	<option value="">선택</option>
	<option value="10">마우스</option>
	<option value="20">키보드</option>
	<option value="30">모니터</option>
</select>
<br>
<span id="header"></span>
<table id="myTable">
	<tbody id="myTbody"></tbody>
</table>
</form>

</body>
</html>

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>요소 동적 생성</title>
<script>
var table_count = new Array()
var count = 0;
var cnt = 0;
var data_name="";
var city="";
table_count[0] = 0;

function select_chang(country,selt,index) { 
  var selt  = "document.select_form.formselect" + selt;
  var frameobj = eval(selt);

  document.select_form.reset(); // select 문의 선택을 reset 한다
  frameobj.options[index].selected = true; // 선택된 것만 보여진다.

  data_name = country;
  city = frameobj.options[index].value;
  addRow('tlist');
}

function addRow(TableID){ // 테이블 동적 생성
  count++;
  cnt++;
  table_count[cnt] = count;

  var tbody = document.getElementById(TableID).getElementsByTagName("TBODY")[0];
  var row = document.createElement("TR");

  var td1 = document.createElement("TD");

  td1body = "<p align='center'>"+ data_name +"</p>";

  //innerHTML()보다 훨씬 빠른 insertAdjacentHTML()
  td1.insertAdjacentHTML('beforeEnd', td1body );

  var td2 = document.createElement("TD");
  td2body = "<p align='center'>"+ city + "</p>";
  td2.insertAdjacentHTML('beforeEnd', td2body);

  var td3 = document.createElement("TD");
  td6body = "<p align='center'><input type='button' value='삭제' style='border-width:1px; border-style:solid;' onclick=delRow('" + 
		  	TableID + "'," + table_count[cnt] +")></p>";
  td3.insertAdjacentHTML('beforeEnd', td6body);

  row.appendChild(td1);
  row.appendChild(td2);
  row.appendChild(td3);
  tbody.appendChild(row);
}

function delRow(TableID,num){ // 테이블의 특정 위치를 삭제
  var tbody = document.getElementById(TableID).getElementsByTagName("TBODY")[0];
  
  for ( var i = 1; i < table_count.length; i++ ){
    if ( table_count[i] == num ){
	   tbody.deleteRow(i); // 테이블 삭제
       table_count[i] = 0;
    }
  }

  for ( var i = 1; i < table_count.length ; i++ ){ // 위치를 지정하여 이동.
     if ( table_count[i] == 0){  
    	cnt = tbody.rows.length-1;
     	for ( j = i ; j < table_count.length ; j++)
           table_count[j] = table_count[j+1];
 	 }
  }
}

function cancel(TableID){ // 테이블 전체 삭제
  var tbody = document.getElementById(TableID).getElementsByTagName("TBODY")[0];
  var del_cnt = tbody.rows.length;

  for ( var i = 1; i < del_cnt; i++ ){  
    tbody.deleteRow(1); // 테이블 삭제
  }
  cnt = 0; // 테이블 관련 번호를 초기화
}
</script>
</head>
<body>
<form name=select_form>
	<table>
		<tr>
			<td>동물</td>
			<td>식물</td>
		</tr>
		<tr>
			<td>
				<select name="formselect0" size="5"
					onchange="select_chang('동물',0,selectedIndex)">
					<option value="호랑이">호랑이</option>
					<option value="개">개</option>
					<option value="소">소</option>
					<option value="돼지">돼지</option>
				</select> 
			</td>
			<td>
				<select name="formselect1" size="5"
					onchange="select_chang('식물',1,selectedIndex)">
					<option value="장미">장미</option>
					<option value="백합">백합</option>
					<option value="해바라기">해바라기</option>
					<option value="코스모스">코스모스</option>
				</select>
			</td>
		</tr>
	</table>
	<input type="button" value="전체삭제" onclick="cancel('tlist')">
	<br><br>
	<table id="tlist" width="230">
		<tbody>
			<tr>
				<td style="background-color:silver;">
					<p align="center">대분류</p>
				</td>
				<td style="background-color:silver;">
					<p align="center">소분류</p>
				</td>
				<td style="background-color:silver;">
					<p align="center">비고</p>
				</td>
			</tr>
		</tbody>
	</table>
</form>
</body>
</html>

 

 

'JavaScript' 카테고리의 다른 글

자바스크립트 폼(form)과 부트스트랩(bootstrap) 활용  (0) 2024.07.24
자바스크립트 이벤트(javascript event)  (4) 2024.07.24
자바스크립트 함수(Arrow 함수, 재귀함수)  (1) 2024.07.24
자바스크립트 배열과 함수  (2) 2024.07.24
자바스크립트 문법 배우기  (1) 2024.07.24

'JavaScript'의 다른글

  • 현재글자바스크립트 돔(DOM)

관련글

티스토리툴바