js节点操作---备忘录

最新推荐文章于 2022-03-06 04:31:20 发布

weixin_47204963

最新推荐文章于 2022-03-06 04:31:20 发布

阅读量93

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_47204963/article/details/113183317

版权

需要特别注意的是同时替换多个节点和克隆节点是加true

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TodoList</title>
    <style>
        .todolist {
            margin: 50px auto;
            width: 700px;
        }

        .todo-header input {
            width: 200px;
            padding: 10px;
            border: 1px solid #ccc;
        }
        .todo-header button {
            padding: 10px 20px;
            background-color: #f5f5f5;
            border: 1px solid #ccc;
        }

        .todo-body ul {
            padding: 0;
            list-style: none;
        }

        .todo-body li {
            margin: 15px 0;
            padding: 10px;
            border: 1px solid #ccc;
        }

        .todo-body li.active {
            border-color: red;
        }
    </style>
</head>
<body>
    <div class="todolist">
        <div class="todo-header">
            <input type="text" id="input">
            <button id="addBtn">添加</button>
            <button id="insertBtn">插入</button>
            <button id="removeBtn">删除选中的选项</button>
            <button id="replaceBtn">替换选中的选项</button>
        </div>
        <div class="todo-body">
            <ul>
                <li>去吃饭</li>
                <li>去看电影</li>
                <li>去做足疗</li>
            </ul>
        </div>
    </div>

    <script>
        (function(){
            // 获取相关的元素
            var input = document.querySelector('#input'); // 输入框
            var addBtn = document.querySelector('#addBtn'); // 添加按钮
            var insertBtn = document.querySelector('#insertBtn'); // 插入按钮
            var removeBtn = document.querySelector('#removeBtn'); // 删除按钮
            var replaceBtn = document.querySelector('#replaceBtn'); // 替换按钮
            var ulBox = document.querySelector('.todo-body ul');  // ul 元素



            // 当点击添加按钮的时候 给添加按钮监听 单击事件
            addBtn.onclick = function(){
                // 创建一个标签名是 li 的元素对象
                var newLi = document.createElement('li');
            
                // 给新创建的 li 元素设置文本内容
                newLi.innerHTML = input.value;

                // 让 newLi 添加到 ul 中，作为 ul 的子元素
                ulBox.appendChild(newLi);
            };

            // 但点击插入按钮的时候
            insertBtn.onclick = function(){
                // 创建一个新的标签名是 li 的元素
                var newLi = document.createElement('li');

                // 给新创建的 li 元素设置文本内容
                newLi.innerHTML = input.value;

                // 把新的 li 元素，添加到 ul
                // ulBox.insertBefore(newLi, ulBox.firstChild);
                // ulBox.insertBefore(newLi, ulBox.lastElementChild); // 倒数第二个子元素
                ulBox.insertBefore(newLi, ulBox.children[1]); // 第二个子元素
            };


            // console.log(ulBox.children);
            [].forEach.call(ulBox.children, function(item){
                // 给每个li添加 click 事件
                item.onclick = function(){
                    item.classList.toggle('active');
                }
            })

            // 点击删除按钮，删除选中的
            removeBtn.onclick = function(){
                /*
                // 一次删一个
                // 获取到被选中的元素
                var reLi = document.querySelector('.todo-body li.active');
                // 删除子元素
                ulBox.removeChild(reLi);
                */

                // 获取所有被选中的元素的集合
                var reLis = document.querySelectorAll('.todo-body li.active');
                console.log(reLis)
                // 遍历 挨个删除
                reLis.forEach(function(item){
                    ulBox.removeChild(item);
                });

            }

            // 点击替换按钮，替换选中
            replaceBtn.onclick = function(){
                // 获取所有选中的 选项
                var selectedLis = document.querySelectorAll('.todo-body li.active');

                // 创建一个新的 li 元素
                var newLi = document.createElement('li');
                newLi.innerHTML = input.value;

                // 遍历选中的li，进行替换
                selectedLis.forEach(function(item){
                 
                    // 替换,在替换时如果新节点不克隆，则只存在一个，选择的多个旧节点被合并替换为1个
                    ulBox.replaceChild(newLi.cloneNode(true), item);

                });
            };



            console.log(ulBox.cloneNode());
            console.log(ulBox.cloneNode(true));
        })()

    </script>
</body>
</html>