老师帮我检查下代码，还有什么需要改进的吗？

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <style type="text/css">
    html,
    body {
        margin: 0;
        padding: 0;
    }

    div:not(:nth-of-type(2)) {
        width: 500px;
        height: 100%;
        background-color: #a0e4ff;
        margin: 0 auto;
    }
    /*ul默认有外边距*/

    ul {
        width: 300px;
        height: 100%;
        background-color: #ecc7ea;
        list-style: none;
        /*清除默认边距*/
        margin: 0;
        padding: 0;
        margin: 20px auto;
        margin-bottom: 30px;
    }

    li {
        width: 200px;
        height: 30px;
        line-height: 30px;
        margin: 30px auto;
        background-color: #cdffc0;
    }
    </style>
</head>

<body>
    <div id="box">
        <button id="btnAdd">添加元素</button>
        <button id="btnRemove">删除元素</button>
        <ul id="list">我是ul
            <li>我是li1</li>
            <li>我是li2</li>
            <li>我是li3</li>
        </ul>
    </div>
    <script type="text/javascript">
    //此处填写代码
    var ul = document.getElementById('list');
    var li = ul.querySelectorAll('li');
    var btnAdd = document.getElementById('btnAdd');
    var btnRemove = document.getElementById('btnRemove');
    for(var i = 0; i < li.length; i++){
        li[i].onmouseover = function(){
            this.style.background = "blue";
        }
        li[i].onmouseout = function(){
            this.style.background = "pink";
        }
    }
    btnAdd.onclick = function(){
        var li1 = document.createElement('li');
        var len = ul.children.length;
        var txt = document.createTextNode('我是li' + (len + 1));
            li1.appendChild(txt);
            ul.appendChild(li1);
        }
    btnRemove.onclick = function(){
        ul.removeChild(ul.lastElementChild);
    }
    </script>
</body>

</html>

原来是晓琪_ 2019-07-19

源自：JS DOM操作 11-2 编程练习

收起

2回答

提问者原来是晓琪_ 2019-07-25 14:58:42

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <style type="text/css">
    html,
    body {
        margin: 0;
        padding: 0;
    }

    div:not(:nth-of-type(2)) {
        width: 500px;
        height: 100%;
        background-color: #a0e4ff;
        margin: 0 auto;
    }
    /*ul默认有外边距*/

    li {
        width: 200px;
        height: 30px;
        line-height: 30px;
        margin: 30px auto;
        background-color: #cdffc0;
    }
    </style>
</head>

<body>
    <div id="box">
        <button id="btnAdd">添加元素</button>
        <button id="btnRemove">删除元素</button>
        <ul id="list">我是ul
            <li>我是li1</li>
            <li>我是li2</li>
            <li>我是li3</li>
        </ul>
    </div>
    <script type="text/javascript">
    //此处填写代码
    var ul = document.getElementById('list');
    // var li = ul.querySelectorAll('li');
    var li = ul.getElementsByTagName('li');
    var btnAdd = document.getElementById('btnAdd');
    var btnRemove = document.getElementById('btnRemove');
    function changeColor() {
        for(var i = 0; i < li.length; i++){
            if (i >= 3) {
                return;
            }
        li[i].onmouseover = function(){
            this.style.background = "blue";
        }
        li[i].onmouseout = function(){
            this.style.background = "pink";
        }
    }
    }
    changeColor();
    btnAdd.onclick = function(){
        var li1 = document.createElement('li');
        var len = ul.children.length;
        var txt = document.createTextNode('我是li' + (len + 1));
            li1.appendChild(txt);
            ul.appendChild(li1);
            changeColor();
        }
    btnRemove.onclick = function(){
        var len = ul.children.length;
        if (len < 1) {
            return;
        }
        ul.removeChild(ul.lastElementChild);
    }
    </script>
</body>

</html>

老师 var li = ul.querySelectorAll('li');
和var li = ul.getElementsByTagName('li');实现效果一样，用哪个都行吧？

收起回答

好帮手慕星星 #1

是不一样的，可以将原有三个li点击按钮删除，然后点击添加元素按钮，移入前三个元素看看是否有改变颜色。使用getElementsByTagName会改变颜色，使用querySelectorAll不会改变颜色。因为querySelectorAll获取的原有3个，不会随着内容改变而改变。可以测试下哦！

2019-07-25 15:06:11
提问者原来是晓琪_ 回复好帮手慕星星 #2

好的知道了谢谢

2019-07-25 16:43:40

好帮手慕星星 2019-07-19 17:42:01

同学你好，代码中的问题：

1、点击删除按钮，将li全部删除之后继续点击，控制台中会报错：

这是因为已经没有子节点了，再移除就会报错，可以添加判断：

2、如果将原有的元素删除，点击增加按钮新添元素，鼠标移入的时候没有背景颜色改变效果。这是因为for循环中给原有三个元素绑定的，所以新添加的没有，可以封装起来调用：

将querySelectorAll换成getElementsByTagName，这样新添加的元素也可以设置，就不是原来的集合了，会跟着内容改变而改变。

可以重新测试下，祝学习愉快！

收起回答

提问者原来是晓琪_ #1

老师用querySelectorAll和getElementsByTagName效果都一样呀？

2019-07-24 13:57:04
好帮手慕星星回复提问者原来是晓琪_ #2

你好，可以将自己修改后的代码粘贴上来，老师帮助你测试下。

2019-07-24 14:26:00