Vanilla JavaScript에서 nextElementSibling 의 적절성

Question

내비게이션 메뉴 코드의 일부입니다.mainMenuItem > nextMainMenuLink 의 계층적 관계를 가지고 있습니다.nextMainMenuLink 는 실제로 포커싱되는, 대부분의 상호작용을 담당하는 a태그 요소입니다.nextMainMenuItem 이 존재하지만 nextMainMenuLink 가 존재하지 않는 상황의 처리를 위해 return; 을 사용하였습니다.두 번째 else if 부터입니다.해당 구문은 메인메뉴로 인해 서브메뉴가 열린 이후의 상황을 다룹니다.서브메뉴리스트 내의 어느 서브메뉴에 있던 Tab 을 누르면 다음 메인메뉴로 이동하게끔 구현하였습니다.그 과정에서 nextElementSibling 을 사용하게 되었고이것과 관련하여 여러 생각을 해 본 결과,추후 DOM 요소가 깨지는 등의 예외적 상황을 처리하려면 Array.from(...).indexOf(...) 을 사용해서 배열화시키는 게더 나을 수도 있지 않을까라는 생각에 도달하게 되었습니다.지금의 구현 방식의 적절성에 대한 답변 부탁드리겠습니다.Github URL: https://github.com/KyusunPark/my-portfolio

yeori · Answer

tab을 누르면 다음 형제 노드로,시프트tab을 누르면 이전 형제 노드로 포커스를 넘기는 뭐 이런 걸 만드시는 거 같은데,아마 이전 형제가 없는 0번째 노드이거나 반대로 다음 형제가 없는 n-1번째 노드에 대해서 특별한 처리를 하려는 거 같고,조건문을 보면 뭔가 비슷한 코드가 자꾸 반복됩니다.mainMenuLink와 subMenuList가 항상 같이 붙어다니는 것도 중복입니다. 왜냐하면 지금 포커스된 노드로부터 하위 자식노드들은 있든 없든 자동으로 특정할 수 있을 거 같은데...nextElementSibling같은 DOM api를 쓰는 것은 상관없으나 구체적인 dom element의 구조를 적나라하게 드러내고 있어서 코드가 복잡하게 느껴집니다.tab으로 포커스 이동하다가 다음 형제 노드가 없으면 부모의 다음 형제로 넘기는 기능인데 전체 코드가 어떻게 생겼는지 모르니 두번째 세번째 조건처럼 0번째와 n-1번째를 따로 나눠서 볼 필요가 있나 싶습니다.저라면 메뉴 구조를 나타내는 모델 클래스를 만들어서 포커스 점프같은 기능을 메소드 안에 넣었을 겁니다.그리고 키보드 판정도 정리해서 쓰기 편하게 만들겁니다.

Vanilla JavaScript에서 nextElementSibling 의 적절성

1개의 답변

#js 목록