<!DOCTYPE?html>
<html>
<head>
????<meta?charset="utf-8">
????<title>js</title>
????<script>
????????window.onload?=?function(){
????????????var?oBtn?=?document.getElementById("btn");
????????????var?oUl?=?document.getElementById("ul1");
????????????var?aLi?=?oUl.getElementsByTagName('li');
????????????console.log(aLi.length+";1");
????????????function?mHover?()?{
????????????????//鼠標移入變紅,移出變白
????????????????console.log(aLi.length+";2");//疑問在這里,在執(zhí)行完添加節(jié)點的事件以后,
??????????????????????????????????????????????//為什么aLi.length會增加?這里沒有重新運行獲取全部li的代碼啊。
????????????????for(var?i=0;?i<aLi.length;i++){
????????????????????aLi[i].onmouseover?=?function(){
????????????????????????this.style.background?=?'red';
????????????????????};
????????????????????aLi[i].onmouseout?=?function(){
????????????????????????this.style.background?=?'#fff';
????????????????????}
????????????????}
????????????}
????????????mHover?();
????????????//添加新節(jié)點
????????????oBtn.onclick?=?function(){
????????????????var?oLi?=?document.createElement('li');
????????????????oLi.innerHTML?=?111;
????????????????oUl.appendChild(oLi);
????????????????mHover?();
????????????};
????????}
????</script>
</head>
<body>
<input?type="button"?name=""?id="btn"?value="添加"?/>
<ul?id="ul1">
????<li>111</li>
????<li>222</li>
????<li>333</li>
????<li>444</li>
</ul>
</body>
</html>這是一個動態(tài)添加li節(jié)點的功能,點擊按鈕添加li,同時具有鼠標移入和移出改變li顏色功能;但是點擊增加按鈕,執(zhí)行新增li節(jié)點以后,重新執(zhí)行了mHover ()函數(shù),此時這個函數(shù)中循環(huán)體的aLi.length為什么會增加?怎么實現(xiàn)增加的?因為我并沒有在這個循環(huán)體中重新獲取li節(jié)點(oUl.getElementsByTagName('li')沒有執(zhí)行)。請解答
對于js代碼節(jié)點數(shù)量增加的獲取
weibo_和諧_漢子_0
2017-07-13 16:10:08