DOM

1. document object model
   html 안에 여러 요소를 객체로 인식하여, 원하는 화면구현이나 동적인 기능 처리를 할 때 사용하는 객체 모델을 말한다.

2. DOM의 구성요소
   1) dom 객체의 선택자
   - css의 선택자를 통해서 객체를 선택할 수 있다. (태그명, #아이디, .클래스)
   ex) document.querySelector("h1")
   - 단일
   var ch01 = document.querySelector("#ch01")
   - 다중
   var cls01 = document.querySelectorAll(".cls01")
   복합선택자, [속성=속섭값]등 css의 선택자를 활용하여 선택자 처리를 할 수 있다.

   ps) 반복문과 활용
   for(var idx=0;idx<배열.length;idx++)
   배열선택자[idx].속성

   2) dom 객체의 속성
   - 출력
   .innerText : html 태그 적용되지 않은 내용을 화면에 출력
   .innerHTML : 랜더링(html 적용)한 내용을 출력 처리
   - 기본 속성
   .속성 = 속성값 : 태그가 가지고 있는 기본 속성을 읽거나 설정할 수 있다.
   - style 속성
   .style.속성 = 속성값 : css 속성이 적용된 내용을 설정할 수 있다
   - form 요소객체
   .value = "값" : 데이터의 입력 처리를 할 때, form 하위 객체의 요소인 value를
   통해서 효과적으로 처리할 수 있다.

여러가지 배열 데이터와 함께 DOM 객체 활용하기

1. DOM 다중 선택자
   var domArry = document.querySelectorAll("다중의 선택자")

2. 배열문과 반복 처리
   domArry[0] : 개별적인 단위 DOM 객체
   domArry[1] : 개별적인 단위 DOM 객체

   for(var i=0;i<배열.length;i++){
   // 각 DOM의 데이터 처리
   domArry[i].innerText = "입력데이터"
   }

	<table id="tab01">
		<thead>
			<tr><th>이름</th><th>국어</th></tr>
		</thead>
		<tbody>
			<tr><td></td><td></td></tr>
			<tr><td></td><td></td></tr>
			<tr><td></td><td></td></tr>			
		</tbody>
	</table>
  /*  
  # 다중의 속성을 가진 배열을 위의 DOM에 처리하기 위한 logic
	var studs = [{name:"홍길동",kor:70}, {name:"마길동",kor:80}, {name:"고길동",kor:60}]
	var tds = document.querySelectorAll("#tab01 td");
	tds[0].innerText = studs[0].name
	tds[1].innerText = studs[0].kor 
	tds[2].innerText = studs[1].name
	tds[3].innerText = studs[1].kor 
	tds[4].innerText = studs[2].name
	tds[5].innerText = studs[2].kor 
	
	
	==> logic 처리
	for(var idx=0;idx<tds.length;idx++){
		var stIdx = Math.floor(idx/2)
		if(idx%2==0){
			tds[idx].innerText = studs[stIdx].name
		}else{
			tds[idx].innerText = studs[stIdx].kor
		}
	} 
 */   

<table id ="tab02">
		<thead>
			<tr><th>물건명</th><th>가격</th><th>갯수</th><th>계</th></tr>
		</thead>
		<tbody>
			<tr><td></td><td></td><td></td><td></td></tr>
			<tr><td></td><td></td><td></td><td></td></tr>
			<tr><td></td><td></td><td></td><td></td></tr>			
		</tbody>
</table>

<script>
 var tdd = document.querySelectorAll("#tab02 td")
 var prod = [
	 {pname:"사과",price:2500, cnt:5},
	 {pname:"오렌지",price:2700,cnt:3},
	 {pname:"키위",price:1600,cnt:6}
 ]
 
 /*
		td 0  1  2  3  물건0 물건명 가격 갯수 계
		td 4  5  6  7  물건1 물건명 가격 갯수 계
		td 8  9  10 11 물건2 물건명 가격 갯수 계 
 */
 	prod.forEach(function(pro,idx){
		var tdIdx = idx*4
		tdd[tdIdx].innerText = pro.pname 
		tdd[tdIdx+1].innerText = pro.price 
		tdd[tdIdx+2].innerText = pro.cnt 
		tdd[tdIdx+3].innerText = pro.price*pro.cnt 
	
	})
</script>