계층이동

• 한 요소에서 부모, 조부모, 증조 또는 형제 자식 등으로 이동할 수 있는 인터페이스가
  존재합니다.

1.1 parentElement

• 현재 요소보다 한 단계위 부모 요소에 접근할 수 있는 인터페이스 입니다.

1.2 childElement

• 현재 요소보다 한 단계 아래 자식 요소에 접근할 수 있는 인터페이스 입니다.

• childElementCount는 자식요소의 개수를 나타내고, children은 자식 요소들의
  목록과 인덱스로 접근하면 요소안에 속해있는 태그나 컨텐츠를 확인할 수 있습니다.
  

1.3 nextSibling

• 현재 요소에서 인접한 형제 요소에 접근할 수 있는 인터페이스 입니다.

• 현재 요소의 코드라인 보다 아래에 존재하는 형제 요소에 접근한다.

• 브라우저에 따라서 요소 사이에 자동으로 공백이 생기기에 의도치 않은 텍스트노드가
  출력될 수 있습니다.

불필요한 노드를 보고싶지 않다면 nextElementSibling을 사용하는것을 추천합니다.
노드를 거치지 않고 예상한 형제요소에 접근할 수 있기 때문

1.4 previousSibling

• 현재 요소에서 인접한 형제 요소에 접근할 수 있는 인터페이스 입니다.

• 현재 요소의 코드라인 보다 위에 존재하는 형제 요소에 접근한다.

• 브라우저에 따라서 요소 사이에 자동으로 공백이 생기기에 의도치 않은 텍스트노드가
  출력될 수 있습니다.

textnode

• 특정 브라우저는 마크업사이에 공백을 나타내기 위해서 문서 내에 textnode를 삽입합니다.

• 이로 인해서 next나 previous 인터페이스에 Element 사용없이 Sibling을 바로 사용한다면
  현재 요소에서 인접한 형제 요소 사이(마크업사이)에 공백으로써 textnode가 존재하므로
  형제 요소 대신 textnode가 출력될 수 있습니다.

• textnode는 현재 요소의 닫기 태그와 다음 요소의 열기태그 사이에 존재합니다.

textnode를 봐야하는 상황이 아니라면 nextSibling.nextSibling로 2번 사용해서
노드를 건너뛰거나, nextElementSibling 를 사용해서 노드를 건너뛰고 형제 요소에
접근하면 됩니다.