对于js代码节点数量增加的获取

<!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");//疑问在这里，在执行完添加节点的事件以后，
                                              //为什么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 ();
            //添加新节点
            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>

这是一个动态添加li节点的功能，点击按钮添加li，同时具有鼠标移入和移出改变li颜色功能；

但是点击增加按钮，执行新增li节点以后，重新执行了mHover ()函数，此时这个函数中循环体的aLi.length为什么会增加？怎么实现增加的？因为我并没有在这个循环体中重新获取li节点（oUl.getElementsByTagName('li')
没有执行）。请解答

weibo_和谐_汉子_0

浏览 1271回答 1

1回答

FSYu

你在按钮的点击函数里调用了mHover ()函数，所以mHover ()函数里的li数量又重新获取了，如果按钮的点击函数不调用mHover ()函数，那么mHover ()函数里的li数量是固定的

0 0

随时随地看视频慕课网APP