Firstchild/lastchildがJavaScriptで動作しない

Question

"firstChild"と "lastChild"が動作しないのはなぜですか？私が配列のliの位置でこれを行うと、すべて正常に動作します。

これは私のHTMLです：

<div class="listContainer"> 
    <ul class="list"> 
     <li>Item 1</li> 
     <li>Item 2</li> 
     <li>Item 3</li> 
     <li>Item 4</li> 
     <li>Item 5</li> 
    </ul> 
</div> 

これは、それが働いていないとき、私のJSです：

for (var i = 0; i < div.length; i++){ 
     div[i].addEventListener("mouseover", function(){ 
     var list = this.firstElementChild; 
     var listLi = list.children; 

     var firstLi = listLi.firstChild; 
     var lastLi = listLi.lastChild; 

     firstLi.style.backgroundColor = "red"; 
     lastLi.style.backgroundColor = "blue"; 
     }); 
}; 

私はこのようにこれを実行しようとしていた、そしてそれは働いていない：

listLi.firstChild.style.backgroundColor = "red"; 
listLi.lastChild.style.backgroundColor = "blue"; 

しかし、私が配列内の位置を指定しているときは、すべて正常に機能します。

listLi[0].style.backgroundColor = "red"; 
listLi[4].style.backgroundColor = "blue"; 

編集：それは働いているとき、それは、そのようになっています。https://fiddle.jshell.net/aadfnazk/

Answer 1

まず、それは代わりにテキストノードの要素ノードを選択するように、あなたはfirstElementChildとlastElementChildを使用する必要があります。

第2に、子配列listLiではなく、list要素で呼び出します。

list.firstElementChild.style.backgroundColor = "red"; 
list.lastElementChild.style.backgroundColor = "blue"; 

Updated Fiddle