码迷，mamicode.com
首页 > 其他好文 > 详细

5、BOM编程 DOM编程（2）

时间：2016-04-26 20:43:11      阅读：216      评论：0      收藏：0      [点我收藏+]

标签：

DOM

创建新节点

document.createElement("标签名")       创建新元素节点
elt.setAttribute("属性名", "属性值")  设置属性
elt.appendChild(e)                      添加元素到elt中最后的位置
elt.insertBefore(new, child);           添加到elt中，child之前。
                                           // 参数1：要插入的节点参数2插入目标元素的位置
elt.removeChild(eChild)                 删除指定的子节点

案例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script>
/*
创建节点：
document.createElement("标签名")       创建新元素节点
elt.setAttribute("属性名", "属性值")  设置属性
添加节点到文档树上:
elt.appendChild(e)                      添加元素到elt中最后的位置  把元素添加最后一个子节点的后面。
elt.insertBefore(new, child);           添加到elt中，child之前。
                                // 参数1：要插入的节点  参数2：插入目标元素的位置     

*/
/*
function add(){
    //
    var inputNode = document.createElement("input"); // 创建一个节点的对象
    inputNode.setAttribute("type","file"); //给新节点设置type的属性值。
    var body = document.getElementsByTagName("body")[0];
    body.appendChild(inputNode);    //把新节点添加到body体中。
}
*/
var count = 1;
function add(){
    var trNode  = document.createElement("tr");
    var tdNode  = document.createElement("td");
    var inputNode  = document.createElement("input");
    inputNode.setAttribute("type","button");
    inputNode.setAttribute("value",count+"");
    count++;
    tdNode.appendChild(inputNode);
    trNode.appendChild(tdNode);
    //trNode添加 到指定 的位置上。
    var tbodyNode = document.getElementsByTagName("tbody")[0];
    //tableNode.appendChild(trNode);
    var button1 = document.getElementById("b1");
    tbodyNode.insertBefore(trNode,button1); // 注意： 使用obj.insertBefore(o1,o2)这个方法的时候
    //obj必须是o1,o2的直接父节点。
    //alert(button1.nodeName+"~~"+trNode.nodeName+"~~"+tableNode.nodeName);
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
    <table>
        <tr>
            <td>
                <input type="button" value="0">
            </td>
        </tr>
        <tr id="b1">
            <td>
                <input type="button" value="添加" onclick="add()">
            </td>
        </tr>
    </table>



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script>
    function addFile(){
        var trNode = document.createElement("tr");
        var td1  = document.createElement("td");
        var td2  = document.createElement("td");
        td1.innerHTML="<input type=‘file‘/>";
        td2.innerHTML="<a href=‘#‘ onclick=‘deleteFile(this)‘>删除附件</a>"
        trNode.appendChild(td1);
        trNode.appendChild(td2);
        //把trNode添加 到添加按钮上面
        var addButton = document.getElementById("addButton");
        var tbody = document.getElementsByTagName("tbody")[0];
        tbody.insertBefore(trNode,addButton);
    }


    function deleteFile(deleteNode){
        //找到要删除的tr  a---->td---->tr
        var trNode  = deleteNode.parentNode.parentNode;  //获取到了要删除的tr节点。
        // 找 到trNode的父节点
        var tbodyNode  =document.getElementsByTagName("tbody")[0];
        tbodyNode.removeChild(trNode);
        //trNode.removeNode(true); // removeNode() 在firefox上不 支持，在ie支持。
    }
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
 <table>
        <tr>
            <td><input type="file"></td>
            <td><a  href="#" onclick="deleteFile(this)">删除附件</a></td>
        </tr>
        <tr id="addButton">
            <td>    
                <input type="button" value="添加附件"  onclick="addFile()"/>
            </td>
        </tr>
    </table>

</body>
</html>

案例

生成二级城市联动菜单 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
select{
    width:100px;
    }
</style>
<script type="text/javascript">
    function selcity()
    {
        //定义数据对应关系
        //城市有很多，所以通过数组存储。每一个省对应一个城市数组，怎么建立对应关系呢？
        //每一个省都有自己的角标。通过角标和数组建立对应关系，这就是二维数组。 

        var arr = [[‘--选择城市--‘],[‘海淀区‘,‘朝阳区‘,‘东城区‘,‘西城区‘]
                    ,[‘沈阳‘,‘大连‘,‘鞍山‘,‘抚顺‘]
                    ,[‘济南‘,‘青岛‘,‘烟台‘,‘威海‘]
                    ,[‘石家庄‘,‘廊坊‘,‘唐山‘,‘秦皇岛‘]];

        //获取选择的省的角标。
        var selNode = document.getElementById("selid");
        var index = selNode.selectedIndex;

        var cities = arr[index];

        var subSelNode = document.getElementById("subselid");

        //有更简单清除方式，只要改变下拉菜单的长度即可。
        subSelNode.options.length = 0;
        /*
        //清除上一次选择的子菜单内容。
        for(var x=1; x<subSelNode.options.length;)
        {

            alert(subSelNode.options.length+"..."+subSelNode.options[x].innerHTML+"..."+x);
            subSelNode.removeChild(subSelNode.options[x]);
        }
        */



        for(var x=0; x<cities.length; x++)
        {
            var optNode = document.createElement("option");

            optNode.innerHTML = cities[x];

            subselid.appendChild(optNode);
        }
    }
</script>
</head>
<body>
<select id="selid" onchange="selcity()">
    <option>--选择省市--</option>
    <option>北京市</option>
    <option>辽宁省</option>
    <option>山东省</option>
    <option>河北省</option>
</select>
<select id="subselid">
    <option>--选择城市--</option>
</select>
</body>
</html>

动态生成年、月、日字段

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
/**
 * @author Administrator
 */
//通过js创建年,月,日
//获取Dom
var dom = window.document;
function myYear() {
    //获取年的select
    var year = dom.getElementById("year");
    //创建年
    var minYear = 1900;
    var maxYear = new Date().getFullYear();
    for (var i = minYear; i <= maxYear; i++) {
        //创建Option
        var opt = dom.createElement("option");
        //设置Option,标签体.
        opt.innerHTML = i;
        opt.value = i;
        //挂载节点
        year.appendChild(opt);
    }
}
function myMonth() {
    var month = dom.getElementById("month");
    //创建月
    for (var i = 1; i <= 12; i++) {
        //创建Option
        var opt = dom.createElement("option");
        //设置Option,标签体.
        if (i < 10) {
            opt.innerHTML = "0" + i;
            opt.value = i;
        } else {
            opt.innerHTML = i;
            opt.value = i;
        }
        month.appendChild(opt);
    }
    month.onchange = myDay;
}
function myDay() {
    clear();
    //创建天
    // 大月1 3 5 7 8 10 12 ,小月4 6 9 11    闰年2月 非闰年的2月
    //获取年
    var year = dom.getElementById("year").value;
    //获取月
    var month = dom.getElementById("month").value;
    if (year == "") {
        alert("请选择年");
        return;
    }
    if (month == "") {
        alert("请选择月");
        return;
    }
    //获取天select
    var day = dom.getElementById("day");
    //一个月至少有28天.
    for (var i = 1; i <= 28; i++) {
        var opt = dom.createElement("option");
        if (i < 10) {
            opt.innerHTML = "0" + i;
            opt.value = "0" + i;
        } else {
            opt.innerHTML = i;
            opt.value = i;
        }
        day.appendChild(opt);
    }
    //大月
    var isBigMonth = month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12;
    //小月
    var isSmallMonth = month == 4 || month == 6 || month == 9 || month == 11;
    //闰年    可以整除4但不能整除100 或者 年份可以整除400.
    var isLeapYear = (year % 4 == 0 && year % 100 != 0) || year % 400 == 0;
    //判断,如果是大月,添加3天
    if (isBigMonth) {
        //添加3天
        for (var i = 29; i <= 31; i++) {
            var opt = dom.createElement("option");
            opt.innerHTML = i;
            opt.value = i;
            day.appendChild(opt);
        }
    } else if (isSmallMonth) {
        //添加2天
        for (var i = 29; i <= 30; i++) {
            var opt = dom.createElement("option");
            opt.innerHTML = i;
            opt.value = i;
            day.appendChild(opt);
        }
    } else if (isLeapYear) {
        //如果是闰年,添加一天.专门处理闰年2月.
        var opt = dom.createElement("option");
        opt.innerHTML = 29;
        opt.value = 29;
        day.appendChild(opt);
    }
}
function clear() {
    var day = dom.getElementById("day");
    var optArr = day.childNodes;
    for (var i = optArr.length - 1; i >= 0; i--) {
        day.removeChild(optArr[i]);
    }
}
function getBirthday() {
    //获取Dom
    var dom = window.document;
    myYear();
    myMonth();
}
getBirthday();
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>javascript</title>
</head>
<body>
    生日:
        <select id="year">
            <option>年</option>
        </select>
        <select id="month">
            <option>月</option>
        </select>
        <select id="day">
            <option>日</option>
        </select>

</body>
</html>

生产一个验证码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
/**
 * @author Administrator
 */
//验证码  ,4位的,由字符,数字组成.
function createCode() {
    var datas = ["A", "B", "C", "D", "E", "F", "G", "H", "Z", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
    //随机的从数组中取出4个元素.
    var mess = "";
    var index = 0;
    for (var i = 0; i < 4; i++) {
        //生成随机数.而且是在数组的长度范围内.
        //0-9之间的随机数. Math.floor(Math.random()*10)
        //0到数组长度(不包含)之间的浮点数.,向下取整,
        var index = Math.floor(Math.random() * datas.length);
        mess += datas[index];
    };
    //
    var codeSpan = window.document.getElementById("codeSpan");
    codeSpan.style.color = "red";
    codeSpan.style.fontSize = "20px";
    codeSpan.style.background = "gray";
    codeSpan.style.fontWeight = "900";
    codeSpan.style.fontStyle = "italic";
    codeSpan.style.textDecoration = "line-through";
    codeSpan.innerHTML = mess;
    codeSpan.value = mess;
}
createCode();
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>javascript</title>
</head>
<body>
    <span id="codeSpan"></span><a href="#" onclick="createCode()">看不清楚</a>

</body>
</html>

正则表达式

位置：
        ^       开头
        $      结尾
次数：
        *       0或多个
        +       1或多个
        ?       0或1个
        {n}     就是n个
        {n,}    至少n个
        {n,m}   最少n个，最多m个
通配符：
        \d      任意数字
        \D      任意非数字
        \s      任意空白
        \S      任意非空白
        .       任意字符（除‘\n‘外）
组合：
        [a-z]
        [0-9]
        等
组：
        (正则)        匹配括号中正则表达式对应的结果，并暂存这个结果。
        (?:正则)  匹配括号中正则表达式对应的结果，但不暂存这个结果。
        \数字     使用第n个组匹配的结果
使用正则的工具（RegExp类与相关方法）
创建：
        // 方式一
        var regex = new RegExp("正则表达式", "标志");
        // 方式二
        var regex = /正则表达式/标志
参数说明：
正则表达式：
    参见上面的规则 
标志：
    g （全文查找出现的所有 pattern） 
    i （忽略大小写） 
    m （多行查找） 
方法：
        Regexp.test( str )
        String.replace( regex, str )

案例：校验表单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script>

    //用户名的规则： 第一位是字母，只有由数字与字母 组成，6位。
    function checkName(){
        //获取到了用户名的值
        var userName = document.getElementById("username").value;
        var userSpan = document.getElementById("userId"); 
        var reg = /^[a-z][a-z0-9]{5}$/i;
        if(reg.test(userName)){
            //符合规则  
            userSpan.innerHTML="正确".fontcolor("green");
            return true;
        }else{
            //不符合规则
            userSpan.innerHTML="错误".fontcolor("red");
            return false;
        }   
    }


    //校验密码  6位
    function checkPass(){
        var  password  = document.getElementById("pwd").value;
        if(password.length>0){
            var reg = /^\w{6}$/;
            var passSPan = document.getElementById("passId"); 
            if(reg.test(password)){
                //符合规则  
                passSPan.innerHTML="正确".fontcolor("green");
                return true;
            }else{
                //不符合规则
                passSPan.innerHTML="错误".fontcolor("red");
                return false;
            }
        }

    }


    //检验密码是否正确
    function ensurepass(){
        var  password1 = document.getElementById("pwd").value; //第一次 输入的密码
        var password2 = document.getElementById("ensurepwd").value;
        if(password2.length>0){
            var enSpan  = document.getElementById("ensure");
            if(password1.valueOf()==password2.valueOf()){
                enSpan.innerHTML="正确".fontcolor("green");
                return true;
            }else{
                enSpan.innerHTML="错误".fontcolor("red");
                return false;
            }   
        }
    }


    //校验邮箱
    function checkEmail(){
        var  email  = document.getElementById("email").value;
        var reg = /^[a-z0-9]\w+@[a-z0-9]{2,3}(\.[a-z]{2,3}){1,2}$/i;  // .com .com.cn
        var emailspan = document.getElementById("emailspan"); 
        alert(reg.test(email));
        if(reg.test(email)){
            //符合规则  
            emailspan.innerHTML="正确".fontcolor("green");

            return true;
        }else{
            //不符合规则
            emailspan.innerHTML="错误".fontcolor("red");
            return false;
        }   
    }


    //校验兴趣爱好： 至少要算中其中 的 一个。
    function checkHoby(){
        var likes  = document.getElementsByName("like");
        var hobySpan =document.getElementById("hobbySpan")
        var flag  = false;
        for(var i =  0 ; i<likes.length ; i++){
            if(likes[i].checked){
                flag =true;
                break;
            }   
        }

        if(flag){
            //符合规则  
            hobySpan.innerHTML="正确".fontcolor("green");
            return true;
        }else{
            //不符合规则
            hobySpan.innerHTML="错误".fontcolor("red");
            return false;
        }   
    }



    //总体校验表单是否可以提交了  如果返回的true表单才可以提交。 上面的表单项必须要每个都填写正确。
    function checkForm(){
        var userName = checkName();
        var pass  = checkPass();
        var ensure  = ensurepass();
        var email = checkEmail();
        var hoby = checkHoby();
        if(userName&&pass&&ensure&&email&&hoby){
            return true;
        }else{
            return false;   
        }

    }







</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>正则表达式</title>
</head>
<body>                              
<form action="success.html" method="get" onsubmit="return checkForm()"> <!--如果表单提交时候触发的方法返回是false,那么该表单不允许提交，如果返回的是true允许提交 -->
            <table border="1px" width="50%" align="center" cellspacing="0px" cellpadding="3px">
                <tr>
                    <td width="25%">姓名:</td>
                    <td>
                        <input type="text" name="username" id="username" onblur="checkName()"/>
                        <span id="userId"></span>
                    </td>
                </tr>
                <tr>
                    <td >密码:</td><td>
                        <input type="password"  name="pwd" id="pwd" onblur="checkPass()"/>
                        <span id="passId"></span>
                    </td>
                </tr>
                <tr>
                    <td>确认密码:</td><td>
                <input type="password" name="ensurepwd" id="ensurepwd" onblur="ensurepass()" />                     <span id="ensure"></span>
                    </td>
                </tr>
                <tr>
                    <td>邮箱</td><td>
                        <input type="text" name="email" id="email" onblur="checkEmail()"/>
                        <span id="emailspan"></span>

                    </td>
                </tr>
                <tr>
                    <td>性别</td><td>
                        <input type="radio" checked="ture" name="gender" id="male" value="male"/>
                    男
                        <input type="radio" name="gender" value="female"/>

                    女</td>
                </tr>

                <tr>
                    <td>爱好:</td><td>
                        <input type="checkbox" checked="checked"  name="like" />
                    eat
                        <input type="checkbox" name="like" />
                    sleep
                        <input type="checkbox" name="like"/>
                    play  
                    <span id="hobbySpan"></span>
                    </td>
                </tr>
                <tr>
                    <td>城市</td><td>
                    <select name="city" id="city">
                        <option value=""> 请选择</option>
                        <option value="bj"> 北京 </option>
                        <option value="gz"> 广州 </option>
                        <option value="sh"> 上海 </option>
                    </select>

                    </td>
                </tr>
                <tr>
                    <td>自我介绍</td><td>                   <textarea cols="15" rows="5"  name="myInfo" id="myInfo"></textarea></td>
                </tr>
                <tr align="center">
                    <td colspan="2"><!--提交按钮-->
                    <input type="submit"/>
                    </td>
                </tr>
            </table>
        </form>
</body>
</html>

5、BOM编程 DOM编程（2）

标签：

原文地址：http://blog.csdn.net/guanhang89/article/details/51245729
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！