12-关于DOM操作的相关案例

1,模态框案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        html, body{
            height: 100%;
        }
        #box{
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,.3);
        }
        #content{
            position: relative;
            top: 150px;
            width: 400px;
            height: 200px;
            line-height: 200px;
            text-align: center;
            color: red;
            background-color: #fff;
            margin: auto;
        }
        #span1{
            position: absolute;
            background-color: red;
            top: 0;
            right: 0;
            width: 30px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            color: #fff;
        }
    </style>
</head>
<body>
    <button id="btn">弹出</button>
</body>
<script>
    //获取dom元素,1获取事件源
    var oBtn = document.getElementById('btn');
    //创建弹出模态框的相关DOM对象
    var oDiv = document.createElement("div");
    var oP = document.createElement("p");
    var oSpan = document.createElement("span")

    //设置属性
    oDiv.id = "box";
    oP.id = 'content';
    oP.innerHTML = "模态框弹出";
    oSpan.innerHTML = "X";
    oSpan.id = 'span1'

    //追加元素
    oDiv.appendChild(oP);
    oP.appendChild(oSpan);

    //点击弹出按钮 弹出模态框
    oBtn.onclick = function(){
        //动态的添加到body中一个div
        this.parentNode.insertBefore(oDiv, btn)
    }
    //点击x关闭模态框
    oSpan.onclick = function(){
        //移除oDiv元素
        oDiv.parentNode.removeChild(oDiv)
    }
</script>
</html>

2,建议留言板

需求:

当再textarea中输入内容,点击留言板按钮,会添加到浏览器中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .close{
            display: inline-block;
            width: 20px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            cursor: pointer;
            background-color: rgba(0,0,0,.1);
            margin-left: 20px;
        }
    </style>
</head>
<body>
    <h1>简易留言板</h1>
    <div id="box">
        
    </div>
    <textarea id="msg"></textarea>
    <input type="button" id="btn" value="留言"/>
    <button onclick="sum()">统计</button>
</body>
<script>
    // 将ul标签添加到div#box标签中
    var oUl = document.createElement("ul");
    var oBox = document.getElementById("box");
    oBox.appendChild(oUl);

    var oBtn = document.getElementById('btn');
    var oMsg = document.getElementById('msg');
    //控制留言的总数量
    var count = 0;
    oBtn.onclick = function(){
        //点击留言按钮事件操作
        //1.创建li标签
        var oLi = document.createElement("li");
        //2 设置内容
        oLi.innerHTML = oMsg.value + "<span class='close'>X</span>";

        //3 如果想再插入的第一个li获取的前面继续添加li标签
        //3.1获取li标签
        var olis = document.getElementsByTagName('li');
        //3.2 如果是第一次添加的li标签,则直接添加ul的后面
        if(olis.length == 0){
            oUl.appendChild(oLi);
            count++;
        }else {
            //3.3 如果不是第一次添加的li标签,则插入到第一个li标签的前面
            oUl.insertBefore(oLi, olis[0]);
            count++
        }
        //4,添加完之后,清空textarea的值
        oMsg.value = '';

        //5 点击X的时候删除当前的一条数据
        //5.1先获取所有的X
        var oSpans = document.getElementsByTagName('span');

        //5.2 for循环 对所有的X添加点击事件
        for(var i = 0; i < oSpans.length; i++){
            oSpans[i].onclick = function(){
                oUl.removeChild(this.parentNode);
                count--;
            }
        }
    }
    function sum(){
        alert("一共发布了"+count+"条留言")
    }
</script>
</html>

 

posted @ 2018-08-15 20:08  猴里吧唧  阅读(107)  评论(0)    收藏  举报