Firstchild/lastchild不能在JavaScript中工作

我在想，为什么在这种情况下，“firstChild”和“lastChild”不起作用，但是当我通过数组中的位置来做这件事时，一切正常。Firstchild/lastchild不能在JavaScript中工作

这是我的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/

来源

2016-04-01 ChickenLeg

u能告诉我们一些拨弄你的代码？ –

你的意思是*它不工作*？它输出任何错误？ – Lewis

'firstChild'和'lastChild'是一个元素，而不是一个子列表。你不需要'listLi'，直接使用'list.firstChild'即可。 – rgthree

首先，你必须使用firstElementChild和lastElementChild，以便可以选择一个元素节点，而不是一个文本节点。

其次，请拨打list元素而不是listLi儿童数组。

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

Updated Fiddle

来源

2016-04-01 14:39:09 4castle

Firstchild/lastchild不能在JavaScript中工作

回答

相关问题