JavaScript中dom操作一练习（实现ul下li的增删，坑点：querySelectAll和getElementsByTagName区别）

最新推荐文章于 2023-01-04 10:55:01 发布

背着我偷偷学习

最新推荐文章于 2023-01-04 10:55:01 发布

阅读量722

点赞数 1

分类专栏：前端文章标签： JS DOM

本文链接：https://blog.csdn.net/weixin_45174022/article/details/103607110

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

练习：实现如下动图效果

由于自己最近再练习DOM操作，做到如上图所示题目，遇到坑点：对querySelectAll和getElementsByTagName返回集合搞不清，querySelectAll返回静态集合，getElementsByTagName返回动态集合。也就是说一个querySelectAll你就算增加li它长度也不会变化，而getElementsByTagName长度会动态改变。

这题实现的代码很简单：1、会运用鼠标事件 2、知道怎么增删DOM节点 3、怎么获取节点和改变节点样式

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>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">
    //此处填写代码
    //1、获取UL下的li节点数组，遍历，用鼠标事件改变样式
    var list = document.getElementById("list");
    var li = list.getElementsByTagName("li");   //这里返回动态集合，而querySelectAll返回静态的集合。。。
    var btnAdd = document.getElementById("btnAdd");
    var btnRemove = document.getElementById("btnRemove");
    for (var i=0, len=li.length; i<len; i++){
        /*console.log(li[i]);*/
        li[i].onmouseover = function () {
            this.style.backgroundColor = "#9400ff";
        }
        li[i].onmouseout = function () {
            this.style.backgroundColor = "#EC7C7D";
        }
    }
    //2、按钮事件，添加li节点
    btnAdd.onclick = function () {
        var text = document.createTextNode("我是li"+(li.length + 1));
        var li1 = document.createElement("li");
        li1.appendChild(text);
        list.appendChild(li1);
    }
    //3、删除事件
    btnRemove.onclick = function () {
        list.removeChild(list.lastElementChild);
    }
</script>
</body>
</html>

仅此记录下，一开始自己用的是querySelectAll获取li节点，然后增加li时，文本内数字一直没有随集合长度增加而增加。太坑了！！！

背着我偷偷学习

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaScript中dom操作一练习（实现ul下li的增删，坑点：querySelectAll和getElementsByTagName区别）

练习：实现如下动图效果由于自己最近再练习DOM操作，做到如上图所示题目，遇到坑点：对querySelectAll和getElementsByTagName返回集合搞不清，querySelectAll返回静态集合，getElementsByTagName返回动态集合。也就是说一个querySelectAll你就算增加li它长度也不会变化，而getElementsByTagName长度会动态改...
复制链接

扫一扫

专栏目录