关于DOM *** 作的案例_html-js-css

概述1. 模态框案例　　需求：　　打开网页时有一个普通的按钮，点击当前按钮显示一个背景图，中心并d出一个d出框，点击X的时候会关闭当前的模态框　　代码如下： <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text 1. 模态框案例

　　需求：

　　打开网页时有一个普通的按钮，点击当前按钮显示一个背景图，中心并d出一个d出框，点击X的时候会关闭当前的模态框

　　代码如下：

<!DOCTYPE HTML><HTML>    <head>        <Meta charset="UTF-8">        <Title></Title>        <style type="text/CSS">            *{                padding: 0;                margin: 0;            }            HTML,body{                height: 100%;            }            #Box{                wIDth: 100%;                height: 100%;                background: rgba(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">d出</button>    </body>    <script type="text/JavaScript">        //获取dom元素 1.获取事件源        var oBtn = document.getElementByID(‘btn‘);        //创建d出模态框的相关DOM对象        var odiv = document.createElement(‘div‘);        var oP = document.createElement(‘p‘);        var oSpan = document.createElement(‘span‘);                        // 设置属性        odiv.ID = ‘Box‘;        oP.ID = ‘content‘        oP.INNERHTML = ‘模态框成功d出‘        oSpan.INNERHTML = ‘X‘;        oSpan.ID = ‘span1‘                // 追加元素        odiv.appendChild(oP);        oP.appendChild(oSpan);        // 点击d出按钮 d出模态框        oBtn.onclick = function(){            //动态的添加到body中一个div            this.parentNode.insertBefore(odiv,oBtn)                    }        // 点击X 关闭模态框        oSpan.onclick = function(){            // 移除odiv元素            odiv.parentNode.removeChild(odiv)        }               </script></HTML>

2.简易留言板

　　需求：

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

　　效果图如下：

　　代码如下：

<!DOCTYPE HTML><HTML>    <head>        <Meta charset="UTF-8">        <Title>留言板</Title>        <style type="text/CSS">            *{                padding: 0;                margin: 0;            }            .close{                display: inline-block;                wIDth: 20px;                height: 20px;                line-height: 20px;                text-align: center;                cursor: pointer;                background-color: rgba(0,.1);                margin-left: 20px;            }        </style>    </head>    <body>        <h1>简易留言板</h1>        <div ID="Box">            <!--<ul>                            </ul>-->                    </div>        <textarea ID="msg"></textarea>        <input type="button" ID="btn" value="留言"/>        <button onclick="sum()">统计</button>    </body>    <script type="text/JavaScript">        // 0 将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.2for循环 对所有的X添加点击事件            for(var i = 0; i< oSpans.length; i++){                oSpans[i].onclick  = function(){                    // 5.3 移除当前的li标签                    oul.removeChild(this.parentNode)                    count--;                }            }                            }            function sum(){            alert(‘一共发布了‘+count+‘条留言‘);                    }    </script></HTML>

3.使用Js模拟选择器中hover

<!DOCTYPE HTML><HTML><head lang="en">    <Meta charset="UTF-8">    <Title></Title>    <style>        button {            margin: 10px;            wIDth: 100px;            height: 40px;            cursor: pointer;        }        .current {            background-color: red;        }    </style></head><body><button>按钮1</button><button>按钮2</button><button>按钮3</button><button>按钮4</button><button>按钮5</button><script>    //需求：鼠标放到哪个button上，改button变成黄色背景（添加类）    var btnArr = document.getElementsByTagname("button");    //绑定事件    for(var i=0;i<btnArr.length;i++){   //要为每一个按钮绑定事件，所以用到了for循环        btnArr[i].onmouSEOver = function () {            //【重要】排他思想：先把所有按钮的classname设置为空，然后把我（this）这个按钮的classname设置为current            //排他思想和for循环连用            for(var j=0;j<btnArr.length;j++){                btnArr[j].classname = "";            }            this.classname = "current";  //【重要】核心代码        }    }    //鼠标离开current时，还原背景色    for(var i=0;i<btnArr.length;i++){   //要为每一个按钮绑定事件，所以用到了for循环        btnArr[i].onmouSEOut = function () { //鼠标离开任何一个按钮时，就把按钮的背景色还原            this.classname = "";        }    }</script></body></HTML>

　　代码解释：

　　鼠标悬停时，current栏变色，这里用到了排他思想：先把所有按钮的classname设置为空，然后把我(this)这个按钮的classname设置为current，就可以达到变色的效果。核心代码是：

//排他思想：先把所有按钮的classname设置为空，然后把我（this）这个按钮的classname设置为current            //排他思想和for循环连用            for(var j=0;j<btnArr.length;j++){                btnArr[j].classname = "";            }            this.classname = "current";

4. tab栏选项卡

　　代码如下：

<!DOCTYPE HTML><HTML>    <head>        <Meta charset="UTF-8">        <Title></Title>        <style type="text/CSS">            *{                padding: 0;                margin: 0;            }            ul{                List-style: none;            }            #tab{                wIDth: 480px;                margin: 20px auto;                border: 1px solID red;            }            ul{                wIDth: 100%;                overflow: hIDden;            }            ul li{                float: left;                wIDth: 160px;                height: 60px;                line-height: 60px;                text-align: center;                background-color: #cccccc;            }                        ul li a{                text-decoration: none;                color:black;            }            li.active{                background-color: red;            }            p{                display: none;                height: 200px;                text-align: center;                line-height: 200px;                background-color: red;            }            p.active{                display: block;                            }                    </style>    </head>    <body>        <div ID="tab">            <ul>                <li >                    <a href="#">首页</a>                </li>                <li>                    <a href="#">新闻</a>                </li>                <li>                    <a href="#">图片</a>                </li>                    </ul>            <p >首页内容</p>            <p>新闻内容</p>            <p>图片内容</p>                                </div>    </body>    <script type="text/JavaScript">        window.onload = function(){            // //需求：鼠标放到上面的li上，li本身变色(添加类)，对应的p也显示出来(添加类);                    //思路：1.点亮上面的盒子。   2.利用索引值显示下面的盒子。            var tabli = document.getElementsByTagname(‘li‘);            var tabContent = document.getElementsByTagname(‘p‘)                    for(var i = 0; i < tabli.length; i++){                // 绑定索引值（新增一个自定义属性：index属性）                tabli[i].index  = i;                tabli[i].onclick = function(){                                        // 1.点亮上面的盒子。   2.利用索引值显示下面的盒子。(排他思想)                    for(var j = 0; j < tabli.length; j++){                        tabli[j].classname = ‘‘;                        tabContent[j].classname = ‘‘;                    }                        this.classname = ‘active‘                                        tabContent[this.index].classname = ‘active‘;//【重要代码】                }        }        }            </script></HTML>