현재 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); // #textnextSibling은 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한다.
