현재 노드에서 다음 노드를 선택할때 nextSibling을 자주 사용한다
자바스크립트로 변수 지정하고 nextSibling을 활용하여 다음 노드 선택을 동적으로 구형하고 있었다
하지만 노드의 다음 노드를 그다음 노드를 선택하다 보면 마지막 노드가 나오는데
그 노드를 맨위로 다시 올렸더니,
저번에 inline, inline-block에서의 여백이 보여진다 ..
마지막 노드를 선택하여 다시 처음으로 올리다 보면 먼가 노드가 초기화 되어서 공백문자를 지워 줘야 한다 ..
방법은
<!-- -->주석을 달아 준다- margin을 4px 만큼 빼준다
- display를 flex를 사용한다
- font-size를 0을 해준다
margin (left or right): -4px이렇게 css를 활용하여 적용해도 되지만 동적인 노드에 일일이 적용하기엔 무리가 있었다, 심지어 다른 조건에서는 레이아웃을 못잡는 경우도 있었다
다양한 방법을 시도하던 중
console.log를 확인해보니 nextSibling로 가져온 부분이 #text로 나와서 찾아보니 nextSibling의 문제였다
nextSibling은 공백이나 줄 바꿈도 하나의 노드로 인식하기 때문에 다시 가져온 노드의 정보에 #text가 담겨있고, #text가 공백문자를 가져오는거 같다
#text노드는 태그 사이의 마크 업 에서 공백이 발생하는 DOM에 삽입되며 ( 즉 요소의 닫기 태그와 다음 태그의 열기 태그 사이에 있습니다 )
(MDN)
css로 이리저리 씨름하다 다른 방법을 찾아보니 nextElementSibling을 찾았고
nextElementSibling
nextElementSibling은 nextSibling와 다르게 공백, 텍스트를 포함하지 않은 Element(요소)만 가져온다
즉, 공백, text등은 가져오지 않는다
nextElementSibling 적용으로 참 순조로히 마무리 할 수 있었다
먼가 나 이외에도 공간여백으로 난처하여 만들어진게 아닌가 싶다 ..
현재 이커머스 작업중에 바닐라 자바스크립트로 캐로셀을 구현해야해서,
저번에 연습하던거에서 더 추가적으로 디테일하게 만들고 있는데 공간여백 등 추가적으로 알게 되는게 많은거 같다
