CLASS/HTLML,CSS,JS

#10-1 / js중급 - 자식노드핸들링,시간함수

hingu 2024. 6. 11. 15:37
⚡ 자식 노드 핸들링
 
var node = document.getElementById("box").childNodes;
var rem = document.getElementById("box").children;

 

childNodes

태그가 공백없이 죽 나열되어있지 않은이상 빈 공백까지 text node로 인식

=>  ∴ text 등 쓸모없는 node까지 싹 찍혀서 핸들링하기 어렵다

 

children : 태그 기점으로 진짜 딱 자식 노드만 확인

 

⚡ 시간함수 ⭐⭐ - 시간함수는 변수에 담아 사용 ! 

- setTimeout : 해당 시간이 지나고 한번만 호출하여 사용(실무에선 이걸 더 많이 사용)
 
<body>
	<div id="box" class="box"></div>
	<input type="button" value="시작" onclick="aa()">
	<input type="button" value="종료" onclick="bb()">
</body>

<script type="text/javascript">
	var no = 0; //전역변수
	var timer; //시간함수를 컨트롤하기위한 변수
	function aa(){
		document.getElementById("box").innerText = no;
		no++;
		
		//aa라는 함수명을 1초후에 실행
		timer = setTimeout(aa,1000); //재귀함수 형태->1초마다신행
	}//해당 방식 - 인증번호 등에 많이 사용
	
	function bb(){ //정지
		clearTimeout(timer);
		no = 0;
	}
</script>



-setInterval : 해당시간에 맞춰서 지속적으로 호출
※ 함수안에 사용시 반복이 중첩되어 시간함수가 늘어남

<body>
	<div id="box2" class="box"></div>
	<input type="button" value="시작" onclick="cc()">
	<input type="button" value="종료" onclick="dd()">
</body>

<script type="text/javascript">
	var n=0;
	var timer2;
	function cc(){
		document.getElementById("box2").innerText = n;
		n++;
	}
	timer2 = setInterval(cc,1000);
	
	function dd(){
		clearInterval(timer2);	
		n=0;
	}
</script>

 

 

🔽 위 둘 응용

⚡ disc 핸들링
 
<style>
	.disc {list-style : none; height : 30px; margin :0; padding : 0;}
	.disc > li {
            width : 30px; height : 30px; 
            background-color : black; border-radius : 100%; float : left; 
        }
</style>
<body>
	<ul class="disc" id="disc">
		<li style="background-color:pink;"></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
	<br>
	<input type="button" value="이전" onclick="prevnext('prev')">
	<input type="button" value="다음" onclick="prevnext('next')">
</body>

<script type="text/javascript">
	var node = document.getElementById("disc").children;
	var n=0;
	
	function next(){
		//자식노드 전체 검정색으로 변경
		var f;
		for(f=0; f<node.length; f++){
			node[f].style.backgroundColor="black";	
		}
		
		n++;		
		if(n>=node.length){ //해당노드의 갯수보다 크거나 같을경우 전역변수값 초기화
			n=0;
		}
		node[n].style.backgroundColor="pink"; //해당 자식노드만 pink로 변경	
	}
	
	function prev(){
		var f;
		for(f=0; f<node.length; f++){
			node[f].style.backgroundColor="black";	
		}
		
		n--;
		if(n<0){
			n=node.length-1;
		}
		node[n].style.backgroundColor="pink";	
	}
	
	//저 둘을 하나로 합친다면?
	function prevnext(val){
		var f;
		for(f=0; f<node.length; f++){
			node[f].style.backgroundColor="black";	
		}
		
		if(val=="next"){
			n++;
			if(n>=node.length){
				n=0;
			}
		}else{
			n--;
			if(n<0){
				n=node.length-1;
			}	
		}
		node[n].style.backgroundColor="pink";	
	}
	
	//자동으로 움직이게한다면?(setTimeout)
	var timer;
	function go_disc(){ 
		var f;
		for(f=0; f<node.length; f++){
			node[f].style.backgroundColor="black";	
		}
		
		n++;
		if(n>=node.length){ //해당노드의 갯수보다 크거나 같을경우 전역변수값 초기화
			n=0;
		}
		node[n].style.backgroundColor="pink";
		timer=setTimeout(go_disc,3000); //3초마다 재귀함수 적용하여 해당함수 반복실행
	}
	timer=setTimeout(go_disc,3000);	//최초실행시 3초후에 해당함수 실행
</script>