Pure Javascript에서 siblings() 사용하기

 

jQuery에 익숙해지면 너무나도 간단하지만 저는 요즘 작업할 때 jQuery를 사용하지 않고 순수 자바스크립트로 작업을 하려고 합니다. React나 Vue와 같은 프레임이 많이지면서 jQuery와 같이 Dom을 직접 탐색하여 이벤트를 발생시키는 건 스크립트 충돌면에서도 좋지 않고 또 별도의 npm을 설치해야 하기 때문입니다. 

 

자바스크립트에서 jQuery 없이 사용하려면 너무나도 불편했던 형제선택, siblings()를 사용해 보겠습니다. 

 

function siblings(t) {
  const children = t.parentElement.children;
  const tempArr = [];

  for (let i = 0; i < children.length; i++) {    
    tempArr.push(children[i]);
  }
  
  return tempArr.filter(function(e){
    return e != t;
  });
}

위의 함수를 이용하여 매개 변수로 형제선택을 하여야 하는 이벤트 요소를 전달하면 배열로 형제 요소를 반환합니다.

 

만약 특정 이벤트(클릭) 중 자신이 선택한 특정 요소에만 클래스가 생성되고 형제 요소에는 클래스가 삭제되는 것도 위의 코드를 이용하면 간단하게 활용할 수 있습니다.

 

function siblings(t, removeClass) {
  const children = t.parentElement.children;

  for (let i = 0; i < children.length; i++) {    
    children[i].classList.remove(removeClass)
  }  
}

위의 코드처럼 이벤트 발생 요소와 함께 매개변수로 클래스만 같이 전달해주면 됩니다. 

자신의 프로젝트에 맞게 스크립트를 수정하여 모두 즐거운 코딩 하세요.

 

감사합니다.