document API 2

addEventListener 활용하여 이벤트 걸기

- 검색된 객체에 이벤트를 걸 수 있다.

- 검색된 객체에는 addEventListener라는 메서드가 존재 한다.

- 구문 : 검색된 객체.addEventListener('이벤트명', 콜백함수);

- 콜백 함수에는 사용자의 행동에 관련된 좌표값 브라우저의 상태값 등이 매개변수로 전달된다.

<button type="button" id="eventAction">이벤트 걸기</button>
<script type="text/javascript">
	var eventAction = document.querySelector('#eventAction');
    eventAction.addEventListener('click',function(e){
    	console.log('클릭',e);
    });
</script>

remove

- 선택된 대상을 제거

<button type="button" id="btn01">제거</button>
<script type="text/javascript">
	var btn01=document.querySelector('#btn01');
	btn01.onclick=function(){
		this.remove();
	}
</script>

화면에서 제거라기보다 DOM 객체의 트리 구조에서 선택된 대상 객체를 제거하기 때문에 화면에도 변경이 된다.

children, childNodes

- children : 선택된 대상의 하위 요소 배열로 반환

- childNodes : 선택된 대상의 하위 텍스트 요소 및 태그 요소 포함 배열로 반환

<ul id="ul01">
	<li>안녕1</li>
	<li>안녕2</li>
	<li>안녕3</li>
</ul>
<script type="text/javascript">
	var ul01=document.querySelector('#ul01');
	ul01.onclick=function(){
		console.log(this.children);
		console.log(this.childNodes);
	}
</script>

parents,parentElement

- 선택된 대상의 상위 요소

<ul>
	<li><button type="button" class="btn02">클릭</button></li>
	<li><button type="button" class="btn02">클릭</button></li>
	<li><button type="button" class="btn02">클릭</button></li>
</ul>
<script type="text/javascript">
	var btn02=document.querySelectorAll('.btn02');
	for(var i=0;i<btn02.length;i++){
		btn02[i].onclick=function(){
			console.log(this.parentNode,'parentNode');
			console.log(this.parentElement,'parentElement');
		}
	}
</script>

innerHTML, innerText

- innerHTML : 선택된 대상의 하위 HTML 요소를 가지고 오거나 교체한다.

삽입 시 문자열을 html 요소로 파싱시켜 삽입한다.

- innerText : 선택된 대상의 하위 텍스트 요소민 가지고 오거나 텍스트 요소로 삽입한다.

<div id="inHtml" style="border:1px solid #000;">버튼을 클릭해주세요.</div>
<button type="button" id="btn03">html 삽입</button>
<script type="text/javascript">
	var btn03=document.querySelector('#btn03');
	var inHtml=document.querySelector('#inHtml');
	btn03.onclick=function(){
		//선택된 대상의 HTML 요소 가지고 오기
		console.log(inHtml.innerHTML);
		var html='';
		
		html+='<ul>';
		html+='<li>';
		html+='ksmart';
		html+='</li>';
		html+='</ul>';
		
		//html 요소
		inHtml.innerHTML=html;
		//text 요소
		inHtml.innerText=html;
	}
</script>

createElement, createTextNode

- createElement : Element(태그) 생성 시 쓰이는 메서드

- createTextNode : 텍스트 요소 생성 시 쓰이는 메서드

- 위의 메서드로 객체를 생성하더라도 화면에는 반영이 되지 않는다.

- 화면에 반영하기 위해서는 트리구조로 정의된 사이에 추가하여야 한다.

- 추가는 appendChild 메서드로 한다.

<button type="button" id="btn04">노드 추가</button>
<script type="text/javascript">
	var myH1=document.createElement('h1');
	myH1.innerText = '한국스마트정보교육원';
	myH1.innerText += 'k-smart';
	console.log(myH1);

	var btn04=document.querySelector('#btn04');
	var body=document.querySelector('body');
	btn04.onclick=function(){
		body.appendChild(myH1);
	}
</script>

appendChild

- 선택된 대상의 하위요소에 생성된 객체 혹은 선택된 객체를 추가한다.

- 문자열로 만들어진 대상은 추가되지 않는다.(node만 추가됨)

<button type="button" id="btn04">노드추가</button>
<script type="text/javascript">
	var myH1=document.createElement('h1');
	myH1.innerText='한국스마트정보교육원';
	console.log(myH1);
	
	var btn04=document.querySelector('#btn04');
	var body=document.querySelector('body');
	btn04.onclick=function(){
		body.appendChild(myH1);
	}
</script>

 

setAttribute, getAttribute, removeAttribute

- setAttribute : 선택된 대상에 속성 추가

- getAttribute : 선택된 대상에 속성 값 가지고오기

- removeAttribute : 선택된 대상의 속성 값 제거

<button type="button" id="btn05" data-mydate="1">속성제어</button>
<ul>
	<li><button type="button" class="member-list" value="홍길동" data-memberAge="20" data-memberAddr="전주">홍길동</button></li>
	<li><button type="button" class="member-list" value="홍길동" data-memberAge="25" data-memberAddr="익산">홍길동</button></li>
</ul>
<script type="text/javascript">
	var btn05=document.querySelector('#btn05');
	btn05.onclick=function(){
		//속성값 가지고오기
		console.log(this.getAttribute('id'));
		//속성값 제거
		this.removeAttribute('data-mydata');
		//속성 추가
		this.setAttribute('data-mynumber',50);
		
		console.log(this);
	}
	
	var memberList=document.querySelectorAll('.member-list');
	for(var i=0;i<memberList.length;i++){
		memberList[i].onclick=function(){
		console.log(this.value);
		console.log(this.getAttribute('data-memberAge'));
		console.log(this.getAttribute('data-memberAddr'));
		}
	}
</script>

Attribute control을 눌렀을 때의 console

두 개의 홍길동 버튼을 눌렀을 때 console

 

classList

- 선택된 대상에서 classList 속성에 접근하여 클래스를 추가하거나 제거 할 수 있다.

- classList.add('클래스명'); -> 추가

- classList.remove('클래스명'); -> 제거

- classList.toggle('클래스명'); -> 추가, 제거 순환

<style>
	.m-input{padding:5px;}
	.n-input{border:3px solid #000;}
	.danger-input{border:3px solid #f00;}
	.back-color{background-color:#f00;}
</style>
<input type="text" class="m-input n-input">
<button type="button" id="btn06">체크</button>
<button type="button" id="btn07">토글</button>
<script type="text/javascript">
	var btn06=document.querySelector('#btn06');
	var mInput=document.querySelector('.m-input');
	btn06.onclick=function(){
		if(mInput.value.trim()==''){
			mInput.classList.remove('n-input');
			mInput.classList.add('danger-input');
		}else{
			mInput.classList.add('n-input');
			mInput.classList.remove('danger-input');
		}console.log(mInput);
	}
	
	//토글
	var btn07=document.querySelector('#btn07');
	var body=document.querySelector('body');
	
	btn07.onclick=function(){
		body.classList.toggle('back-color');
		console.log(body);
		console.log(body.classList);
	}
	
</script>

input에 아무것도 입력하지 않거나 공백인데 Check 버튼을 눌렀다.

danger-input의 속성이 추가되는 것을 console에서 확인할 수 있다.

input에 이순신이라는 문자열을 넣어주고 Check 버튼을 눌렀다.

n-input의 속성이 추가되는 것을 console에서 확인할 수 있다.

Toggle을 누르면 body의 배경에 빨간색이 추가된다.

Toggle을 한 번 더 누르면 빨간 배경은 사라진다.