5、BOM编程 DOM编程（2）

最新推荐文章于 2020-11-11 22:15:47 发布

guanhang89

最新推荐文章于 2020-11-11 22:15:47 发布

阅读量4.3k

点赞数

分类专栏： JavaWeb

本文链接：https://blog.csdn.net/guanhang89/article/details/51245729

版权

JavaWeb 专栏收录该内容

71 篇文章 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>

guanhang89

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
5、BOM编程 DOM编程（2）

DOM创建新节点document.createElement("标签名") 创建新元素节点elt.setAttribute("属性名", "属性值") 设置属性elt.appendChild(e) 添加元素到elt中最后的位置elt.insertBefore(new, child); 添加到elt中，child之前。
复制链接

扫一扫