js添加、删除dom

有一个input输入框，以及4个操作按钮
- 点击"左侧入"，将input中输入的数字从左侧插入队列中；
- 点击"右侧入"，将input中输入的数字从右侧插入队列中；
- 点击"左侧出"，读取并删除队列左侧第一个元素，并弹窗显示元素中数值；
- 点击"右侧出"，读取并删除队列又侧第一个元素，并弹窗显示元素中数值；
点击队列中任何一个元素，则该元素会被从队列中删除

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>队列操作</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        #content{
            width: 500px;
            margin: 200px auto 0;
            text-align: center;
        }
        #show{
            height: 40px;
            margin-top: 3px;
        }
        #show span {
            display: inline-block;
            margin-right: 2px;
            line-height: 40px;
            padding: 0 2px;
            font-size: 20px;
            color: #fff;
            background: #f00;
            
        }
    </style>
</head>
<body>
    <div id="main">
        <div id="content">
            <div id="user_area">
                <input name="user_input" type="text">
                <input type="button" name="left_in" value="左侧入">
                <input type="button" name="right_in" value="右侧入">
                <span style="display: inline-block;width: 20px;"></span>
                <input type="button" name="left_out" value="左侧出">
                <input type="button" name="right_out" value="右侧出">
            </div>
            <div id="show"></div>
        </div>
    </div>
    <script type="text/javascript">
        var show = document.getElementById("show");
        var user_area = document.getElementById("user_area");
        user_area.addEventListener("click",function (e) {       //事件委托
            var num = document.getElementsByName("user_input")[0].value;
            var name = e.target.name;
            if(!+num&&(name === "left_in"||name === "right_in")) {   //对输入是否为空做判断
                alert("请输入一个数字");
            }else{
                switch (name) {     //根据name来设置不同的行为
                    case "left_in":
                        show.insertBefore(addNumber(num), show.firstChild);
                        break;
                    case "left_out":
                        if(show.hasChildNodes()) {
                            show.removeChild(show.firstChild);
                        }else{
                            alert("没有元素了");
                        }
                        break;
                    case "right_in":
                        show.appendChild(addNumber(num));
                        break;
                    case "right_out":
                        if(show.hasChildNodes()) {
                            show.removeChild(show.lastChild);
                        }else{
                            alert("没有元素了");
                        }
                        break;
                }
            }
        });
        function addNumber(num) {
            var span = document.createElement("span");
            span.innerHTML = num;
            return span;
        };


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

1，关于获取元素：

　　getElementsByClassName("这里写上类名，不需要点号") ——返回文档中所有指定类名的元素集合，作为 NodeList 对象。

　　getElementById("这里写ID，不加#号") ——返回对拥有指定 ID 的第一个对象的引用，注意不是集合，如果ID不存在，返回null，如果存在多个指定ID的元素，则返回undefined。

　　getElementsByName("这里写name的值") ——返回带有指定名称的对象的集合。

　　getElementsByTagName("填写标签名") ——返回带有指定标签名的对象的集合。参数填写*号，会返回所有元素。

　　 querySelector("这里写css选择语句")—— 返回文档中匹配指定 CSS 选择器的第一个元素。

　　 querySelectorAll("同上")—— 返回文档中匹配指定 CSS 选择器的所有元素（集合）。

ps：得到集合可以使用索引获取指定元素节点。

2,关于事件代理：

　　var btn = document.getElementById("myBtn");

　　btn.addEventListener("click", function(){ alert(this.id); }, false);

　　btn.addEventListener("click", function(){ alert("Hello world!"); }, false);

　　这两个事件处理程序会按照添加它们的顺序触发，通过 addEventListener()添加的事件处理程序只能使用 removeEventListener()来移除；移除时传入的参数与添加处理程序时使用的参数相同。这也意味着通过 addEventListener()添加的匿名函数将无法移除。

posted on 2018-04-01 02:53 漏三刀阅读(1330) 评论(0) 编辑收藏举报