11/3 35-2 [JS] DOM3 위치 바꾸기

화면에 행을 클릭하고 위 아래로 바꾸는 이벤트 구현

구현 전

// 한 가지 주의사항! 이거 로드시키지 않으면 아무리 객체 가져와도 가져와 지지 않는다.
 var ul = document.querySelector('ul');
 console.log(ul);   // 이거 null나옴
 
 window.addEventListener('load',function(){ // 로드 시키면 이제 null 안나옴 !
 	var ul =  document.querySelector('ul');
    //버튼 가져오기
    var upButton = document.querySelector('.up');
    var downButton = document.querySelector('.down');
    
    //클릭을 해서 위로 올릴 건데 뭘 클릭했는지 표시를 해야 알 수 있지! 
    //그래서 선택 한 li에 배경색을 설정 할 것임
    //나중에 이벤트버블링이란 것을 자세히 할 건데 
    //개념은 대충 ul에 이벤트를 부착하면 li에 발생한 이벤트가 부모인ul에 전달되는 것!
    
    //부모인 ul에 이벤트 바인딩(리스너 부착)    
    var li = null; // 우선 null로 초기화한 li객체를 만들어 놓음
    ul.onclick=funtion(e){  // 이벤트 객체(e) 필요시 추가 가능
    console.log(e.target.nodeName);  // 근데 내가 클릭한게 ul인지li 인지 구분이 안되니까 구분 해 줘야함 !!
       if(e.target.nodeName==='LI'){  // 클릭한 것 중에 li만 적용 할 수 있게 한정하고
                 // 맨 처음엔 li가 null 상태고, 이전에 뭐가 선택되어 있는 상태라면 이전에 선택한 놈이 li객체에 들어 있음
    		if(li != null) li.style.backgroundColor='white';  //이것이 자스에서 css에 접근하는 방법!!, 새로 선택 할거니까 배경을 흰색으로 만들어 놓고 
      		  	 //내가 클릭한 li에 배경색을 설정해서 구분하게 할 것임 
    		e.target.style.backgroundColor = 'green';  
      			 //변수 li를 클릭한 li로 변경(한 개만 선택 되어야 하니까 !! )
    		li=e.target;  
            }
         };
    
    //위로 버튼
     upButton.onclick = function(){
      if(li === null){  // null 체크 li를 선택 안 했을 때 !
         alert('메뉴를 클릭하세요!');
         return;
      }
       var previous = li.previousElementSibling;  // 내가 클릭한 것 위에 것을 끌어내리고 올릴거야!
       console.log('prevoius:',previous);   // 위에것이 맞는지 확인
       if(previous === null){
       		alert('이전 메뉴가 없어요');
            return;
       }
       li.insertAdjacentElement('afterend',previous);   
     };
    
    //아래로 버튼
     downButton.onclick=function(){
      if(li === null){ 
         alert('메뉴를 클릭하세요');
         return;
       }
       var next = li.nextElementSibling; // 내 다음의 것을 내 앞에 위치 시킬  것 !          
           if(next === null){
             alert('다음 메뉴가 없어요');
             return;
           }
          li.insertAdjacentElement('beforebegin',next);
      };     
 });

DOM API 사용하기:노드의 위치 바꾸기

메뉴 위치 변경하기

• 메뉴1
• 메뉴2
• 메뉴3
• 메뉴4
• 메뉴5
• 메뉴6