[解決済み] nextElementSiblingとnextSiblingの違いは何ですか？

質問

時々おかしな結果が出るのですが、同じように思えるので、どなたか違いを教えてください。

解決方法は？

nextSibling'は次のノードオブジェクトを返すのに対し、'nextElementSibling'は次のエレメントオブジェクトを返すので、おそらく本当の問題はノードとエレメントの違いは何なのか？

基本的に、要素は HTML タグによって指定されるのに対し、ノードは DOM 内の任意のオブジェクトです。したがって、要素はノードですが、ノードには空白、コメント、テキスト文字、改行などの形式のテキストノードも含めることができます。エレメントとノードの違いについて詳しくは、こちらをご覧ください。 NodeオブジェクトとElementオブジェクトの違い？

すなわち、次のようなDOMスニペットを使用します。

<div id="start"></div>
Me
<p>Hi</p>

nextSiblingを使用すると、次のようになります。

console.log(document.getElementById('start').nextSibling); // "\nMe\n"
console.log(document.getElementById('start').nextSibling.nextSibling); // "<p>

nextElementSiblingを使用すると、次のようになります。

console.log(document.getElementById('start').nextElementSibling);// "<p>"

また、nextElementSiblingはIE10+と新しい方式であるのに対し、nextSiblingはフルブラウザに対応しています。