20211029 documnet api 실습

document api 실습.

1. .my-div 클릭시 '클릭해주세요'라는 문구를 '한국스마트정보교육원'으로 변경하도록 하시오.

 

<div class ="my-div">
		<span>클릭해주세요.</span>
	</div>
	<div class ="my-div">
		<span>클릭해주세요.</span>
	</div>
	<div class ="my-div">
		<span>클릭해주세요.</span>
	</div>

	<script type="text/javascript">
	var mydiv = document.querySelectorAll('.my-div');
	for(var i=0; i<mydiv.length; i++){
		mydiv[i].addEventListener('click', function(){
			var span = this.querySelector('span');
			span.innerText = '한국스마트정보교육원';
		})
	}
	
	</script>

 

2. 체크된 대상의 값을 합산하여 #totalPrice 에 결과를 출력하여라.

<div id="checkList">
		<label>
			<input type="checkbox" name ="goods" value="1000"> 1000
		</label>
		<label>
			<input type="checkbox" name ="goods" value="2000"> 2000
		</label>
		<label>
			<input type="checkbox" name ="goods" value="3000"> 3000
		</label>
	</div>
	<div>
		합산 : <span id="totalPrice">0</span>
	</div>

 

내풀이)

var goods = document.querySelectorAll('#checkList input[name=goods]');
	var sum = 0;
	for(var i=0; i<goods.length; i++){
		goods[i].addEventListener('click', function(){
			sum += Number(this.value);
			var totalPrice = document.querySelector('#totalPrice');
			totalPrice.innerText = sum;
		});
	}

선생님 풀이)

 

 

3. 아래의 객체를 확인하고 버튼 클릭시 객체를 테이블로 구성하도록 하여라.

<table id="memberList">
	<thead>
		<tr>
			<th>회원명</th>
			<th>회원나이</th>
			<th>회원이메일</th>
		</tr>
	</thead>
		<tbody>
			<tr>
				<td colspan ="3">버튼을 클릭해주세요.</td>
			</tr>
		</tbody>
	</table>
	<button type="button" id="memberPirntBtn">회원출력</button>
    
    var memberList = [
			{memberName : '홍길동' ,memberAge : 20, memberEmail : 'a@naver.com'},
			{memberName : '이순신' ,memberAge : 21, memberEmail : 'b@naver.com'},
			{memberName : '고길동' ,memberAge : 23, memberEmail : 'c@naver.com'},
			{memberName : '유관순' ,memberAge : 25, memberEmail : 'd@naver.com'},
			{memberName : '홍길순' ,memberAge : 26, memberEmail : 'e@naver.com'}
		];

 

var memberPrintBtn = document.querySelector('#memberPirntBtn');
	var tbody = document.querySelector('#memberList tbody');
	
	memberPirntBtn.addEventListener('click', function(){
		var htmlStr = '';
		for(var i=0; i<memberList.length; i++){
			var member = memberList[i];
			htmlStr += '<tr>';
			htmlStr += '<td>';
			htmlStr += member.memberName;
			htmlStr += '</td>';
			htmlStr += '<td>';
			htmlStr += member.memberAge;
			htmlStr += '</td>';
			htmlStr += '<td>';
			htmlStr += member.memberEmail;
			htmlStr += '</td>';
			htmlStr += '</tr>';
		}
		tbody.innerHTML = htmlStr;
	})

---

document api 3

- 검색된 객체 기준으로 상하위 요소를 검색 할 수 있다.
- 검색된 객체 기준으로 객체를 생성 및 소멸을 시킬 수 있다.

 

<div id ="btn-group">
		<ul>
			<li>
				<button type="button" class="my-btn">버튼1</button>
				<hr/>
				<div class="my-text">설명문구입니다.</div>
			</li>
			<li>
				<button type="button" class="my-btn">버튼2</button>
				<hr/>
				<div class="my-text">설명문구입니다.</div>
			</li>
		</ul>
	</div>

 

1. 선택된 개체 기준 하위요소 검색

var btnGroup = document.querySelector('#btn-group');
console.log(btnGroup);

console.log(btnGroup.childNodes, '모든 하위요소 (텍스트포함(개행 및 탭))')
console.log(btnGroup.children, 'html 하위 요소')

childnodes : 공백도 자식요소로 간주하기 때문에 잘 쓰지 않는다.

children : 

 

 

2. 상위 요소 정보를 담은 속성

console.log(btnGroup.parentNode, '상위요소');

parentNdoe : 부모노드

 

console.log(btnGroup.parentElement, '상위요소');

parentElement : 지정된 요소의 부모 요소를 반환

 

3. 이벤트 발동대상 기준으로 상하 요소 검색하기

var myBtn = document.querySelectorAll('.my-btn');
		var cnt = 0;
		for( var i=0; i<myBtn.length; i++){
			myBtn[i].addEventListener('click', function(){
				var parent = this.parentElement;
				var myText = parent.querySelector('.my-text');
				console.log(parent, myText);
				myText.innerText = '카운팅: ' + cnt;
				cnt++;
			});
		}

---

객체생성 및 소멸

- 객체.remove() : 선택된 객체 제거
- createElement() : 객체생성
- createAttribute() : 속성 생성
- setAttributeNode() : 생성한 객체에  속성 부여
- appendChild() : 선택된 대상 하위 요소 추가생성

<div id="mycreateNode">버튼을 클릭해주세요.</div>
<button type="button" id="addNodeBtn">버튼 생성하기</button>

 

var addNodeBtn = document.querySelector('#addNodeBtn');
	var mycreateNode = document.querySelector('#mycreateNode');
	addNodeBtn.addEventListener('click', function(){
		//화면에 적용되지 않는 버튼 객체생성
		var createBtn = document.createElement('button');
		//속성을 생성하기
		var typeAttr = document.createAttribute('type');
		typeAttr.value = 'button';
		//생성된 속성을 버튼 객체에 삽입하기
		createBtn.setAttributeNode(typeAttr);
		//텍스트 요소 삽입하기
		createBtn.innerText = '생성된버튼';
		console.log(createBtn, {createBtn});
		
		//적용안됨.
		//console.log(createBtn.attributes);
		//createBtn.attributes.class = 'text';
		
		//버튼 객체 화면에 삽입
		mycreateNode.appendChild(createBtn);
	});

 

객체복제

- cloneNode(true) - 선택된 객체 복제(true일 경우 하위 요소도 복제)

<div id="cloneList">
		<div class="cloneTarget">
			<input type="text" name="userName" value="홍길동">
		</div>
	</div>
	<button type="button" id="cloneBtn">추가</button>

	var cloneBtn = document.querySelector('#cloneBtn');
		var cloneTarget = document.querySelector('.cloneTarget');
		var cloneList = document.querySelector('#cloneList');
		
		cloneBtn.addEventListener('click', function(){
			//검색된 객체를 복재
			var clone = cloneTarget.cloneNode(true);
			//검색된 대상 하위 요소 검색
			var input = clone.querySelector('[name=userName]');
			//검색된 하위 요소의 속성을 변경.
			input.value = '이순신';
			console.log(clone);
			
			//복제된 대상을 화면에 삽입.
			cloneList.appendChild(clone);
		});

 

 

 

---

실습. 아래의 버튼을 클릭시 클릭된 버튼에 해당되는 행을 제거하도록 하시오.
(제거 관련된 메서드 remove() - 선택된 객체 제거 )

<table border = "1">
		<tr>
			<td>안녕하세요</td>
			<td>
				<button type="button" class ="btn">제거</button>
			</td>
		</tr>
		<tr>
			<td>안녕하세요</td>
			<td>
				<button type="button" class ="btn">제거</button>
			</td>
		</tr>
		<tr>
			<td>안녕하세요</td>
			<td>
				<button type="button" class ="btn">제거</button>
			</td>
		</tr>
		<tr>
			<td>안녕하세요</td>
			<td>
				<button type="button" class ="btn">제거</button>
			</td>
		</tr>
		<tr>
			<td>안녕하세요</td>
			<td>
				<button type="button" class ="btn">제거</button>
			</td>
		</tr>
		<tr>
			<td>안녕하세요</td>
			<td>
				<button type="button" class ="btn">제거</button>
			</td>
		</tr>
	</table>

var button = document.querySelectorAll('.btn');
	for(var i=0; i<button.length; i++){
		button[i].addEventListener('click', function(){
			var line = this.parentElement.parentElement;
			line.remove();
		});
	}

 

실습. 아래의 첨부파일을 등록할 수 있는 양식이 잇다. 추가버튼을 누르게 되면
첨부파일 관련된 양식을 복제하여 추가하도록 하여라.

<form>
		<button type="button" id="add-file">추가</button>
		<div id="file-List">
			<div class="file-group">
				<input type="file" name="userFile">
				<button type="button" class="file-del">제거</button>
			</div>
		</div>
</form>

var addfile = document.querySelector('#add-file');
	var fileList = document.querySelector('#file-List');
	var filegroup = document.querySelector('.file-group');
	
	addfile.addEventListener('click', function(){
		var clone = filegroup.cloneNode(true);
		fileList.appendChild(clone);
	});