2chi

현재 element 에서 이전 또는 이후 element 를 접근 하려고 할때 

previousSibling
nextSibling 

2가지 를 사용해서 가져오려고 하지만 html element 가 아닌 #text가 호출될때가 있다.

원인은 element 사이에 whitespace(공백)으로 인해서 값을 제대로 못가져오게 된다. 

아래 샘플 html 코드에서 현재 2번에서 3번을 접근하려고 할때

<li>
    <a id ="1" >test1</a>
    <a id ="2" >test2</a>
    <a id ="3" >test3</a>
    <a id ="4" >test4</a>
</li>

var temp = document.getElementById('2');
console.log(temp.nextSibling); // #text

nextSibling은 id값이 3인 element 를 접근 못하고 #text를 가져온다.

해당 문법을 정상적으로 사용하려면 아래처럼 공백을 제거해야된다.

<li>
  <a id ="1" >test1</a><a id ="2" >test2</a><a id ="3" >test3</a><a id ="4" >test4</a>
</li>

하지만 이런 방법은 좋은게 아니기 때문에 whitesapce(공백)을 무시하면서 다음 element를 접근하는 

nextElementSibling 을 사용하면 된다. 

var temp = document.getElementById('2');
console.log(temp.nextElementSibling); // <a id ="3" >test3</a>

그럼 공백이 있어도 다음 element를 접근하고

형제 엘리먼트가 더이상 없을때 null을 return한다.