document API3

clone

- 선택된 객체를 복제

- 객체 복구 없이 구조 이동

- html tag 객체(element)이다.

- 검색된 객체를 다른 하위에 삽입하였을 경우 복제가 아닌 이동이 된다.

<h3>객체 복제 없이 구조 이동</h3>
<h4>상단</h4>
<ul id="ul01">
	<li class="li01">안녕하세요</li>
</ul>
<h4>하단</h4>
<ul id="ul02">
</ul>
<button type="button" id="moveBtn">이동</button>
<script type="text/javascript">
	var moveBtn=document.querySelector('#moveBtn');
	var ul01=document.querySelector('#ul01');
	var ul02=document.querySelector('#ul02');
	var li01=document.querySelector('.li01');
	
	moveBtn.onclick=function(){
		ul02.appendChild(li01);
	}
</script>

- 객체 복제 후 삽입

- cloneNode() -> 객체 복제

- cloneNode(true) -> 인수값이 true 일 경우 하위 요소 전체 복제

- cloneNode(false) -> 인수값이 false 일 경우 선택 영역만 복제

<h3>객체 복제 후 삽입</h3>
<h4>상단</h4>
<ul id="ul03">
	<li class="li02">안녕하세요</li>
</ul>
<h4>하단</h4>
<ul id="ul04">
</ul>
<button type="button" id="moveBtn2">복제</button>
<script type="text/javascript">
	var moveBtn=document.querySelector('#moveBtn2');
	var ul01=document.querySelector('#ul03');
	var ul02=document.querySelector('#ul04');
	var li02=document.querySelector('.li02');
	
	moveBtn2.onclick=function(){
		//검색된 li 객체 복제
		//복제 후 화면에는 추가가 안 된 상태
		var cloneLi=li02.cloneNode(true);
		//복제된 대상을 화면에 삽입
		ul04.appendChild(cloneLi);
	}
</script>

cloneNode 활용 예제

<ul id="inputWrap">
	<li>
		<input type="text">
		<button type="button" class="addBtn">추가</button>
		<button type="button" class="delBtn">제거</button>
	</li>
</ul>
<script type="text/javascript">
	var inputWrap=document.querySelector('#inputWrap');
	var addBtn=document.querySelectorAll('.addBtn');
	var delBtn=document.querySelectorAll('.delBtn');
	for(var i=0;i<addBtn.length;i++){
		addBtn[i].onclick=function(){
			//#inputWrap 첫번째 하위요소 선택
			var firstLi=inputWrap.firstElementChild;
			//첫번째 하위 요소를 복제
			var clone=firstLi.cloneNode(true);
			//복제된 대상의 하위 input 태그 검색
			var cloneInput=clone.querySelector('input');
			//value 값을 공백으로 삽입
			cloneInput.value='';
			inputWrap.appendChild(clone);
			/*
				읽어진 대상에만 이벤트가 등록이 되어 있으며,
				추가된 대상에는 이벤트를 별도로 등록해야한다.
				이러한 행위를 '동적바인딩'이라고 한다.
			*/
		}
	}
</script>

 

HTML DOM contains() Method

var div = document.getElementById("myDIV").contains(span);

<ul id="bind01">
	<li><button type="button" class="addBtn01">추가</button></li>
</ul>
<script type="text/javascript">
	var bind01=document.querySelector('#bind01');
	bind01.onclick=function(e){
		console.log(e,e.target.className);
	}
</script>

<ul id="bind01">
	<li><button type="button" class="addBtn01">추가</button></li>
</ul>
<script type="text/javascript">
	var bind01=document.querySelector('#bind01');
	bind01.onclick=function(e){
		var targetClass=e.target.classList;
		console.log(e,targetClass.contains('addBtn01'));
	}
</script>

 

바인딩

- 바인딩 : 이벤트 등록

- 동적 바인딩 : 동적으로 추가된 객체에 이벤트 등록

<ul id="bind01">
	<li><button type="button" class="addBtn01">추가</button>
	<button type="button" class="delBtn01">삭제</button></li>
</ul>
<script type="text/javascript">
	var bind01 = document.querySelector('#bind01');
	bind01.onclick = function(e) {
		//콜백데이터로 이벤트 작동 정보가 매개변수로 넘어온다.
		//target 속성은 이벤트 작동의 행위 대상이다. (클릭 이벤트 클릭한 대상)
		var targetClass = e.target.classList;
		//addBtn01 클래스 버튼을 클릭 했다면
		if (targetClass.contains('addBtn01')) {
			var clone=e.target.parentElement.cloneNode(true);
			this.appendChild(clone);
		}
		//delBtn01 클래스 버튼을 클릭 했다면
		if (targetClass.contains('delBtn01')) {
			e.target.parentElement.remove();
		}
		console.log(e, targetClass.contains('addBtn01'));
	}
</script>

 

콜백 데이터의 target 속성 확인

<div class="div01">
	<div class="div02">
		<div class="div03">
			<button type="button" class="btn001">btn001</button>
		</div>
	</div>
</div>
<script type="text/javascript">
	var div01=document.querySelector('.div01');
	div01.onclick=function(e){
		console.log(e);
		console.log(e.target.classList.contains('div01'));
	}
</script>

 

addEventListener

- addEventListener 메서드를 활용하여 이벤트 등록이 가능하다.

- html 요소 이벤트(on 속성 이벤트)는 동일한 이벤트 한번만 등록 가능한 반면,

addEbemtListener로 이벤트 등록 시 동일한 이벤트 1개 이상 등록이 가능하다.

- addEventListener 이벤트 등록 시 여러 이벤트를 한번에 등록이 가능하다.

<button type="button" id="aelBtn01">이벤트 중첩</button>
<input type="text" id="aelInput01">
<script type="text/javascript">
	var aelBtn01=document.querySelector('#aelBtn01');
	//첫번째 인수 이벤트 명 / 2번째는 함수
	aelBtn01.addEventListener('click',function(e){
		console.log('클릭1',e);
	});
	aelBtn01.addEventListener('click',function(e){
		console.log('클릭2',e);
	});
	var aelInput01=document.querySelector('#aelInput01');
	//여러 이벤트 동시에 바인딩 가능
	aelInput01.addEventListener('keyup',function(){
		console.log(this.value);
	});
</script>