JAVA WEB从入门到精通day05 javascript学习(3)

最新推荐文章于 2025-12-03 13:04:04 发布

原创最新推荐文章于 2025-12-03 13:04:04 发布 · 733 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #java web

javascript 专栏收录该内容

4 篇文章

订阅专栏

本文介绍DOM操作的基础知识，包括如何创建、添加、删除和替换DOM节点，并提供了动态生成表格、省市联动等实用案例。

本节思维导图

这里写图片描述

先通过一个小案例来了解一个操作dom树。

案例：在列表末尾添加节点

<html>
    <head>
        <title>标题</title>
        <script>
            function add()
            {
                    var ul1=document.getElementById("ulid");
                    var li1=document.createElement("li");//创建标签的方法
                    var text1=document.createTextNode("555");//创建文本的方法
                    li1.appendChild(text1);//将节点添加到节点末尾的方法
                    ul1.appendChild(li1);
            }
        </script>

    </head>
    <body>
        <ul id="ulid">
            <li>111</li>
            <li>222</li>
            <li>333</li>
            <li>444</li>
        </ul>
        <input type="button" value="add" onclick="add();">
    </body>
</html>

Element对象:元素对象（标签对象）

方法：
getAttribute():获取标签的属性值
    <input type="text" value="abc" id="text1">
    <script>
        var text1=document.getElementById("text1");
        alert(text1.getAttribute("value"));
    </script>

setAttribute():设置标签的属性值
    <input type="text" value="abc" id="text1">
    <script>
        var text1=document.getElementById("text1");
        text1.setAttribute("value","edg");
        alert(text1.getAttribute("value"));
    </script>

removeAttribute（）：从标签中删除指定属性
    <input type="text" value="abc" id="text1">
    <script>
        var text1=document.getElementById("text1");
        text1.removeAttribute("value");
        alert(text1.getAttribute("value"));
    </script>

Node对象：

属性：
nodeName：返回节点的名称
nodeType：返回节点的类型
nodeValue：返回节点的值，根据其类型

    例子：
    <ul id="ulid">
        <li id="liid1">china</li>
        <li id="liid2">england</li>
        <li id="liid3">america</li>
        <li id="liid4">japan</li>
    </ul>
    <script>
        var li1=document.getElementById("liid1"); //获取liid1的对象
        alert(li1.nodeType);    //标签的TYPE为1
        alert(li1.nodeName);    //标签的NAME就是大写的标签名，这里是LI
        alert(li1.nodeValue);   //没有值，为null

        var id1=li1.getAttributeNode("id");//getAttributeNode（），获取属性节点
        alert(id1.nodeType);  //属性节点的type为2
        alert(id1.nodeName);  //属性节点的name为小写的属性名称，这里是id
        alert(id1.nodeValue); //属性的值，这里是liid1  

        var text1=li1.firstChild;  //获取节点下的第一个子节点，这里用来获得文本节点
        alert(text1.nodeType);     //文本节点的type为3
        alert(text1.nodeName);     //文本节点的name为#text
        alert(text1.nodeValue);    //文本内容，这里是china 

    </script>

parentNode：返回节点的父节点
firstChild：返回节点的首个子节点
lastChild：返回节点的最后一个子节点
nextSibling：返回节点之后的同级节点
previousSibling：返回节点之前的同级节点

innerHTML属性：获取标签中的内容或者设置标签的内容。

获取标签中的内容
    <ul id="ulid">
        <li id="liid1" >china</li>
        <li id="liid2">england</li>
        <li id="liid3">america</li>
        <li id="liid4">japan</li>
    </ul>
    <script>
        var li1=document.getElementById("liid1");//获取li对象
        alert(li1.innerHTML);//获取li里的文本内容，这里是china
    </script>
设置标签中的内容（可以是html代码）
    <div id="div1">
        </div>
        <script>
            var div1=document.getElementById("div1");//获取div对象
            div1.innerHTML="<table><tr><td>aaaaaaa</td></tr><tr><td>bbbbbb</td>     </tr><tr><td>ccccccc</td></tr></table>";向div里写入表格
    </script>

操作DOM树的方法：

            appendChild（）：添加子节点到末尾
            例子：
            将一个div里的列表添加到另一个div中，appendChild方法的效果类似剪切效果，将第一个div里的列表剪切到第二个div中
                <div id="div1">
                    <ul id="ulid">
                        <li id="liid1" >china</li>
                        <li id="liid2">england</li>
                        <li id="liid3">america</li>
                        <li id="liid4">japan</li>
                    </ul>
                </div>
                <div id="div2">
                </div>
                <script>
                    var ul1=document.getElementById("ulid");
                    var div1=document.getElementById("div2");
                    div1.appendChild(ul1);
                </script>

            insertBefore（newNode，oldNode）：在指定的子节点前面插入新的子节点
            例子：
                    <ul id="ulid">
                        <li id="liid1" >china</li>
                        <li id="liid2">england</li>
                        <li id="liid3">america</li>
                        <li id="liid4">japan</li>
                    </ul>
                    <script>
                        var ul1=document.getElementById("ulid");//  先获取父节点
                        var li3=document.getElementById("liid3");//获取指定的节点
                        var insert=document.createElement("li");//创建标签
                        var text=document.createTextNode("france");//创建文本
                        insert.appendChild(text);//将文本节点添加到标签节点下
                        ul1.insertBefore(insert,li3);//将新节点插入
                    </script>

            removeChild（）：删除子节点
            例子：
                <ul id="ulid">
                    <li id="liid1" >china</li>
                    <li id="liid2">england</li>
                    <li id="liid3">america</li>
                    <li id="liid4">japan</li>
                </ul>
                <script>
                    var ul1=document.getElementById("ulid");//获取父节点
                    var li2=document.getElementById("liid2");//获取要删除的节点
                    ul1.removeChild(li2);//删除子节点
                </script>

            replaceChild（newNode，oldNode）：替换节点
            例子：
                    <ul id="ulid">
                        <li id="liid1" >china</li>
                        <li id="liid2">england</li>
                        <li id="liid3">america</li>
                        <li id="liid4">japan</li>
                    </ul>
                    <script>
                        var ul1=document.getElementById("ulid");//获取父节点
                        var li4=document.getElementById("liid4");//获取要替换的子节点
                        var li5=document.createElement("li");//创建新的元素
                        var text=document.createTextNode("canada");//创建文本节点
                        li5.appendChild(text);
                        ul1.replaceChild(li5,li4);//进行替换
                    </script>

            cloneNode（boolean）：复制节点（不常用）
            值为true表示复制。

案例：动态显示时间

                    <div id="div1">
                    </div>
                    <script>
                        window.setInterval("getTime();",1000);//定时器，每隔一秒钟执行一次
                        function getTime()
                        {
                            var div1=document.getElementById("div1");//获取div，在div里显示
                            var date=new Date();//获取当前时间
                            div1.innerHTML=date.toLocaleString();//将div里的内容显示为当前时间
                        }
                    </script>

案例：实现复选框的全选反选练习

<html>
    <head>
        <title>标题</title>
    </head>
    <body>
        <input type="checkbox" name="all" id="all" value="all" onclick="setall();">全选/全不选
        <hr>
        <input type="checkbox" name="aihao" value="aihao1">篮球
        <hr>
        <input type="checkbox" name="aihao" value="aihao2">足球
        <hr>
        <input type="checkbox" name="aihao" value="aihao3">滑雪
        <hr>
        <input type="checkbox" name="aihao" value="aihao4">游戏
        <hr>
        <input type="button" name="all1" value="全选" onclick="all1();">
        <input type="button" name="all2" value="全不选" onclick="all2();">
        <input type="button" name="fan" value="反选" onclick="fan();">
        <script>
            function all1()  //按钮全选的方法
            {
                var arr=document.getElementsByName("aihao");//获取所有复选框
                for(var i=0;i<arr.length;i++)
                {
                    arr[i].checked=true;//复选框的checked属性为true时，表示被选中
                }
            }
            function all2()  //按钮全不选的方法
            {
                var arr=document.getElementsByName("aihao");
                for(var i=0;i<arr.length;i++)
                {
                    arr[i].checked=false;//复选框的checked属性为false时，表示没被选中
                }
            }
            function setall() //复选框全选/全不选的方法
            {
                var arr1=document.getElementById("all");
                if(arr1.checked==true)
                {
                    all1();
                }else
                {
                    all2();
                }
            }
            function fan()     //按钮反选的方法
            {
                var arr=document.getElementsByName("aihao");
                for(var i=0;i<arr.length;i++)
                {
                    //对每个复选框进行遍历，取相反的状态，实现反选
                    if(arr[i].checked)
                    {
                    arr[i].checked=false;
                    }else
                    {
                    arr[i].checked=true;
                    }
                }

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

这里写图片描述

案例：下拉列表左右选择练习

<html>
    <head>
        <title></title>
        <style type="text/css">
        div{
        float:left;
        }
        div select{     //设置下拉列表的大小
            width:100px;
            height:200px;
        }
        span{     //设置span
        display:block;
        cursor:pointer;//当光标指向span时，出现手指的效果
        background:gray;
        margin:2px 2px;
        }
        </style>
    </head>
    <body>
    <div>
        <select multiple="multiple" name="1" id="1"> //select的multiple属性为显示全部下拉列表的内容
            <option value="1">选项1</option>
            <option value="2">选项2</option>
            <option value="3">选项3</option>
            <option value="4">选项4</option>
            <option value="5">选项5</option>
            <option value="6">选项6</option>
            <option value="7">选项7</option>
            <option value="8">选项8</option>
        </select>
        <span id="add" onclick="right();">选中添加到右边>></span>
        <span id="addall" onclick="rightall();">全部添加到右边>></span>
    </div>
        <div>
        <select multiple="multiple" name="2" id="2">
            <option value="1">选项9</option>
        </select>
        <span id="remove" onclick="left();"><<选中删除到左边</span>
        <span id="removeall" onclick="leftall();"><<全部删除到左边</span>
    </div>
    <script>
        function right()  //将选中的列表项添加到右边下拉列表的方法
        {
            var select1=document.getElementById("1");
            var select2=document.getElementById("2");
            var options=select1.getElementsByTagName("option");
            for(var i=0;i<options.length;i++)
            {
                var option=options[i];
                if(option.selected==true)//当列表项被选中时，selected为true，这里判断选中的列表项
                {
                    select2.appendChild(option);将列表项添加到右边的列表
                    i--;//因为列表的长度不断变小，当列表项被添加到右边时，列表长度减一，这时候i是增加的，就会遗漏一些列表项，所以需要i--，让i一直从0开始
                }
            }
        }
        function left()//将选中的列表项添加到第一个列表
        {
            var select1=document.getElementById("1");
            var select2=document.getElementById("2");
            var options=select2.getElementsByTagName("option");
            for(var i=0;i<options.length;i++)
            {
                var option=options[i];
                if(option.selected==true)
                {
                    select1.appendChild(option);
                    i--;
                }
            }
        }
        function rightall()//将第一个列表所有列表项添加到第二个列表
        {
            var select1=document.getElementById("1");
            var select2=document.getElementById("2");
            var options=select1.getElementsByTagName("option");
            for(var i=0;i<options.length;i++)
            {

                var option=options[i];
                select2.appendChild(option);
                i--;
            }

        }
        function leftall()//将第二个列表所有列表项添加到第一个列表
        {
            var select1=document.getElementById("1");
            var select2=document.getElementById("2");
            var options=select2.getElementsByTagName("option");
            for(var i=0;i<options.length;i++)
            {
                    var option=options[i];
                    select1.appendChild(option);
                    i--;
            }

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

这里写图片描述

案例：省市联动练习

<html>
    <head>
        <title></title>
    </head>
    <body>
        <select id="select1" onchange="change(this.value);">//onchange 在元素改变时触发，这里的参数是传递选择的列表项的value
            <option>--请选择--</option>
            <option value="德国">德国</option>
            <option value="日本">日本</option>
            <option value="中国">中国</option>
            <option value="英国">英国</option>
        </select>
        <select id="select2">
        </select>
        <script>
        var arr=new Array(4);
        arr[0]=["中国","北京","上海","南京","重庆","四川"];
        arr[1]=["日本","北海道","大阪","东京","九州","长崎"];
        arr[2]=["德国","慕尼黑","柏林","法兰克福","狼堡"];
        arr[3]=["英国","伦敦","考文垂","利物浦","泽西"];
            function change(value)
            {
                var select2=document.getElementById("select2");
                var options=select2.getElementsByTagName("option");
                for(var i=0;i<options.length;i++)//先看列表里有没有值，有的话就清除
                {
                    select2.removeChild(options[i]);
                    i--;
                }
                for(var i=0;i<arr.length;i++)//判断第一个元素和第一个列表项的值是否相同，相同就将数组里后面的值添加到列表里
                {
                    if(arr[i][0]==value)
                    {
                        for(var j=1;j<arr[i].length;j++)
                        {
                            var option=document.createElement("option");
                            var text=document.createTextNode(arr[i][j]);
                            option.appendChild(text);
                            select2.appendChild(option);

                        }
                    }
                }
            }

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

这里写图片描述

案例：动态生成表格

思路为获取到行和列，然后通过循环将表格的html代码写入到一个变量中，然后用innerHTML属性显示这个表格
<html>
    <head>
        <title></title>
    </head>
    <body>
        行:<input type="text" id="text1">
        列:<input type="text" id="text2">
        <br>
        <input type="button" value="生成" onclick="build();">
        <div id="div1">
        </div>
        <script>
            function build()
            {
                var text1=document.getElementById("text1");
                var text2=document.getElementById("text2");
                var tab="<table border='1'>";//设置一个变量存放表格的代码
                for(var i=0;i<text1.value;i++)
                {
                    tab+="<tr>";
                    for(var j=0;j<text2.value;j++)
                    {
                        tab+="<td>zzzzzzz<td>"
                    }
                    tab+="</tr>"
                }
                tab+="</table>"
                var div1=document.getElementById("div1");
                div1.innerHTML=tab;//将表格的代码显示在div中通过innerHTML属性
            }
        </script>
    </body>
</html>