js基础3 dom基础/绑定获取事件/图片切换练习/文档加载/全选全不选/dom的其他属性/dom的增加/添加删除练习

木一叶liuyue

已于 2022-04-01 11:46:48 修改

阅读量579

点赞数 1

分类专栏：前段文章标签： js

于 2022-03-22 16:56:54 首次发布

本文链接：https://blog.csdn.net/kerryliuyue/article/details/123665427

版权

前段专栏收录该内容

47 篇文章 0 订阅

订阅专栏

dom基础

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>dom</title>

</head>

<body>
    <button id="btn">我是一个按钮</button>
    <script type="text/javascript">
        //  浏览器已经为我们提供文档节点 对象，这个对象时window属性
        // 可以在页面中直接使用，文档节点代表的是整个网页

        //console.log(document);

        //获取button对象:
        var btn = document.getElementById("btn");
        console.log(btn);
        //修改按钮里的文字
        //先试试能不能获取到console.log(btn.innerHTML);
        btn.innerHTML="I am a button"


    </script>
</body>

</html>

绑定单击文档的事件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件</title>

</head>

<body>

    <!-- 我们可以在时间对应的属性中设置一些js代码
    这样当事件被触发时，这些代码会被执行 
        ondblclick双击
        onmousemove 鼠标触摸
    这种写法称为结构和行为耦合，不方便使用

-->
    <!-- <button id="btn" onmousemove="alert('我是按钮,我被点击了')">我是一个按钮</button> -->
    <button id="btn">我是一个按钮</button>
    <script type="text/javascript">
       //事件，就是浏览器和用户之间的交互行为
    //    比如，点击按钮，鼠标移动，关闭窗口
    
    //获取按钮对象
    var btn=document.getElementById("btn");
    console.log(btn);
    //可以为按钮对应的时间绑定处理函数的形式来响应事件，
    //这样当事件被触发时，其对应的函数将会被调用

    //像这种为单击事件绑定的函数，我们称为单击响应函数
    btn.ondblclick=function(){

        alert("点一次哦~~");

    };




    </script>
</body>

</html>

文档的加载

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文档的加载</title>

    <script type="text/javascript">

       /* onload事件会在整个页面加载完成之后才触发
    ！！！为window绑定一个onload
                该事件对应的相应函数将会在页面加载完成之后执行
                这样就可以确保代码执行时所有的dom对象都已经加载完毕了
        */
        window.onload = function () {
            //获取按钮
            var btn = document.getElementById("btn");
            //为按钮绑定响应函数
            btn.onclick = function () {
                alert("hello");
            }
        }

    </script>

</head>

<body>
    <!-- 
        浏览器加载页面时，是按照自上向下的顺序读取的
        读取一行，就运行一行
        如果将script标签写在页面的上面，在代码执行时，页面还没有加载
     -->
    <button id="btn">点我一下 </button>

</body>

</html>

通过类名

 var btn = document.getElementsByClassName("btn")[0];
            btn.onclick = function () {
               alert("dfg");
             }
getElementsByName
getElementsByTagName
都得到的是一个数组

获取元素节点

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>获取元素节点</title>


    <script type="text/javascript">

        /* 尝试定义一个函数，专门用来为指定元素绑定单击响应函数
        idbtr 要绑定单击响应函数的对象的id属性值
        fun 回调函数
        */

        function myclick(idstr, fun) {
            var btn = document.getElementById(idstr);
            btn.onclick = fun;

        }



        window.onload = function () {

            //为id为btn01的按钮绑定一个单机响应函数
            var btn01 = document.getElementById("btn01");
            btn01.onclick = function () {
                //查找#bj的节点
                var bj = document.getElementById("bj");
                //打印bj(可以通过查看元素内部的html代码查看获取到的对不对)
                alert(bj.innerHTML);
            }

            var btn02 = document.getElementById("btn02");
            btn02.onclick = function () {
                //查找所有的li节点
                //通过标签名获取一组元素标签节点
                //这个方法会返回一个类数组对象，所有查询到的元素都会封装到对象中
                //即使查询到的元素只有一个，也会封装到数组中返回
                var lis = document.getElementsByTagName("li");
                //alert(lis);
                //alert(lis.length);
                //遍历数组
                for (var i = 0; i < lis.length; i++) {
                    alert(lis[i].innerHTML);
                }
            }

            var btn03 = document.getElementById("btn03");
            btn03.onclick = function () {
                //查找name=gender的所有元素(input元素)
                var inputs = document.getElementsByName("gender");
                // alert(inputs.length);
                for (var i = 0; i < inputs.length; i++) {
                    /* innerHTML用来获取元素内部的HTML代码,
                     对于自结束标签（input）这个属性没有意思
                     alert(inputs[i].innerHTML);*/

                    /*如果需要读取元素节点的属性，直接使用元素.属性名
                    alert(inputs[i].value); 元素.id 元素.name 元素.value 
                            但是class属性不能采用这种方式，要使用className
                    */
                    alert(inputs[i].className);

                }
            }

            var btn04 = document.getElementById("btn04");
            btn04.onclick = function () {
                //查找#city下面的所有li节点
                //首先找到#city
                var city = document.getElementById("city");
                var lis = city.getElementsByTagName("li");
                // alert(lis.length);
                for (var i = 0; i < lis.length; i++) {
                    alert(lis[i].innerHTML);
                }
            }

            var btn05 = document.getElementById("btn05");
            btn05.onclick = function () {
                //返回#city的所有子节点
                var city = document.getElementById("city");
                /* childnodes会获取包括文本节点在内的所有节点
                 标签之间的空白（换行）也会被当做节点
                 在IE8以下的浏览器中不会把空白当做节点
                 var cns=city.childNodes;
                 alert(cns.length); //9
                 children属性可以获取当前元素的所有子元素
                 */

                var cns = city.children;
                for (var i = 0; i < cns.length; i++) {
                    alert(cns[i].innerHTML);
                }

            }

            var btn06 = document.getElementById("btn06");
            btn06.onclick = function () {
                //获取id为phone的属性
                var phone = document.getElementById("phone");
                //返回#phone的第一个子节点
                /*firstchild 可以获取到当前元素的第一个子节点（包括空白文本节点）
                 firstElementChild 不包括空白   但是兼容性不好*/
                var fir = phone.firstElementChild;
                alert(fir.innerHTML);
            }

            //为id为btn07的按钮绑定一个单击响应函数
            myclick("btn07", function () {
                //获取id为北京的节点
                var bj = document.getElementById("bj");
                //父节点肯定是一个
                var pn = bj.parentNode;
                // alert(pn);
                alert(pn.innerHTML);
                /*innerText 可以获取元素内部的文本内部，并且会自动将html标签去除，和innerhtml类似 */
                alert(pn.innerText);
            });


            //btn08
            myclick("btn08", function () {
                //返回id为Android的前一个兄弟节点
                var and = document.getElementById("android");
                /*也可能获取到空白文本(空格)*/
                // var andps=and.previousSibling;
                /*不会获取空白文本*/
                var andps = and.previousElementSibling;
                alert(andps);

            });


            //btn09
            myclick("btn09", function () {
                //获取id为username的value值属性
                var user = document.getElementById("username");
                //value值就是文本框中填写的内容
                alert(user.value);
            });


            //btn10
            myclick("btn10", function () {
                //获取id为username的value值属性
                var user = document.getElementById("username");
                //value值就是文本框中填写的内容
                user.value = "今天天气真不错";

            });

            myclick("btn11", function () {

                var bj = document.getElementById("bj");
                //alert(bj.innerHTML); 有标签
                //alert(bj.innerText) 

                //获取北京 的文本节点
                alert(bj.firstChild.nodeValue);
            });

        }





    </script>

</head>

<style>
    body {
        width: 800px;
        margin-left: auto;
        margin-right: auto;
    }

    button {
        width: 300px;
        margin-bottom: 10px;
    }

    #btnList {
        float: left;
    }

    #total {
        width: 450px;
        float: left;
    }

    ul {
        list-style-type: none;
        margin: 0px;
        padding: 0px;
    }

    .inner li {
        border-style: solid;
        border-width: 1px;
        padding: 5px;
        margin: 5px;
        background-color: #99ff99;
        float: left;
    }

    .inner {
        width: 400px;
        border-style: solid;
        border-width: 1px;
        margin-bottom: 10px;
        padding: 10px;
        float: left;
    }
</style>

<body>
    <div id="total">
        <div class="inner">
            <p>
                你喜欢哪个城市?
            </p>

            <ul id="city">
                <li id="bj">北京</li>
                <li>上海</li>
                <li>东京</li>
                <li>首尔</li>
            </ul>

            <br>
            <br>

            <p>
                你喜欢哪款单机游戏?
            </p>

            <ul id="game">
                <li id="rl">红警</li>
                <li>实况</li>
                <li>极品飞车</li>
                <li>魔兽</li>
            </ul>

            <br />
            <br />

            <p>
                你手机的操作系统是?
            </p>

            <ul id="phone">
                <li>IOS</li>
                <li id="android">Android</li>
                <li>Windows Phone</li>
            </ul>
        </div>

        <div class="inner">
            gender:
            <input class="hello" type="radio" name="gender" value="male" />
            Male
            <input class="hello" type="radio" name="gender" value="female" />
            Female
            <br>
            <br>
            name:
            <input type="text" name="name" id="username" value="abcde" />
        </div>
    </div>
    <div id="btnList">
        <div><button id="btn01">查找#bj节点</button></div>
        <div><button id="btn02">查找所有li节点</button></div>
        <div><button id="btn03">查找name=gender的所有节点</button></div>
        <div><button id="btn04">查找#city下所有li节点</button></div>
        <div><button id="btn05">返回#city的所有子节点</button></div>
        <div><button id="btn06">返回#phone的第一个子节点</button></div>
        <div><button id="btn07">返回#bj的父节点</button></div>
        <div><button id="btn08">返回#android的前一个兄弟节点</button></div>
        <div><button id="btn09">返回#username的value属性值</button></div>
        <div><button id="btn10">设置#username的value属性值</button></div>
        <div><button id="btn11">返回#bj的文本值</button></div>
    </div>



</body>

</html>

图片切换练习

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script type="text/javascript">
        window.onload = function () {
            /*点击按钮切换图片
            切换图片，就是修改img标签的Src属性
            */

            //获取两个按钮
            var prev = document.getElementById("prev");
            var next = document.getElementById("next");

            /*获取img,因为返回的是一个数组，
            但数组中每次其实只有一张图片，所以我们加一个【0】，
            把第一张图片给取出来*/
            var img = document.getElementsByTagName("img")[0];
            //查看img得到的是什么（加上索引【0】，得到的就是元素了） alert(img);


            //创建一个数组，用来保存图片的路径
            var imgarr = ["./picture/jd (1).jpg", "./picture/jd (2).jpg", "./picture/jd (3).jpg", "./picture/tb (2).png", "./picture/tb (1).png"]
            //创建一个变量，来保存当前正在显示的图片的索引
            var index = 0;

            //设计提示文字
            var info=document.getElementById("info");
            info.innerHTML="一共"+imgarr.length+"张图片,当前是第"+(index+1)+"张";

            //分别为两个按钮绑定单击响应函数
            prev.onclick = function () {
                //修改元素的属性 元素.属性=属性值
                /*
                这样得到的是定值，不太好
                img.src="./picture/jd (1).jpg";*/

                index--;
                if(index<0){
                    //变成循坏
                    index=imgarr.length-1;
                    
                }
                info.innerHTML="一共"+imgarr.length+"张图片,当前是第"+(index+1)+"张";
                img.src = imgarr[index];
            }
            next.onclick = function () {

                index++;
                if(index>imgarr.length-1){
                    index=0;
                }
                img.src = imgarr[index];
                info.innerHTML="一共"+imgarr.length+"张图片,当前是第"+(index+1)+"张";
            }
        }

    </script>

</head>

<style>
    * {
        margin: 0;
        padding: 0;

    }

    #outer {
        width: 590px;
        margin: 50px auto;
        background-color: antiquewhite;
        padding: 10px;
        text-align: center;
    }
</style>

<body>
    <div id="outer">
<p id="info"></p>
        <img src="./picture/jd (1).jpg" alt="京东">
        <button id="prev">上一张</button>
        <button id="next">下一张</button>
    </div>
</body>

</html>

全选全不选

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全选练习</title>
    <script type="text/javascript">
        window.onload = function () {
            var items = document.getElementsByName("items");

            //checkedAllBtn全选按钮，点击按钮以后，多选框全被选中
            var checkedAllBtn = document.getElementById("checkedAllBtn");
            checkedAllBtn.onclick = function () {
                //设置多选框变成选中状态

                // alert(items.length);验证一下是否获取了
                for (var i = 0; i < items.length; i++) {
                    items[i].checked = true;
                }
                //将全选按钮选中
                checkedAllBox.checked=true;

                
            };

            //checkedNoBtn全不选
            var checkedNoBtn = document.getElementById("checkedNoBtn");
            checkedNoBtn.onclick = function () {
                // var items=document.getElementsByName("items");
                for (var i = 0; i < items.length; i++) {
                    items[i].checked = false;
                }

                //将全不选按钮选中
                checkedAllBox.checked=false;
            };

            //checkedRevBtn反选
            var checkedRevBtn = document.getElementById("checkedRevBtn");
            checkedRevBtn.onclick = function () {
                // var items=document.getElementsByName("items");
//也加默认设置为true
checkedAllBox.checked=true;
                for (var i = 0; i < items.length; i++) {
                    /*if(items[i].checked){
                       items[i].checked=false;
                   }
                   else{
                       items[i].checked=true;
                   }*/
                    items[i].checked = !(items[i].checked);
                    

                    //如果不选的话，去掉全选
                    if(!items[i].checked){
                        checkedAllBox.checked=false;
                    }
                }


                //在反选时，也要进行判断，可以直接复制过来但是比较麻烦
            }

            //sendBtn提交
            var sendBtn = document.getElementById("sendBtn");
            sendBtn.onclick = function () {
                for (var i = 0; i < items.length; i++) {
                    if (items[i].checked) {
                        alert(items[i].value);
                    }
                }
            }

            //checkedAllBox
            var checkedAllBox = document.getElementById("checkedAllBox");
            checkedAllBox.onclick = function () {
                for (var i = 0; i < items.length; i++) {
                       /* items[i].checked =checkedAllBox.checked;
                       在事件的相应函数中，响应函数给谁绑定的this就是谁
                       */
                        items[i].checked =this.checked;
                }
                }

            /*如果四个多选框全都（没）选中，则CheckBox也应该（没）选中
            给四个多选框分别绑定单击响应函数*/

            for(var i=0;i<items.length;i++){
               items[i].onclick=function(){
                checkedAllBox.checked=true;
                for(var j=0;j<items.length;j++){
                    //如果有一个没选中
                    if(!items[j].checked){
                        checkedAllBox.checked=false;
                        //一旦进入break，则退出循环
                        break;
                    }
                }
               };
            }

        };
    </script>


</head>

<body>
    <form method="post" action="">
        你爱好的运动是？<input type="checkbox" id="checkedAllBox" />全选/全不选
        <br />
        <input type="checkbox" name="items" value="足球" />足球
        <input type="checkbox" name="items" value="篮球" />篮球
        <input type="checkbox" name="items" value="羽毛球" />羽毛球
        <input type="checkbox" name="items" value="乒乓球" />乒乓球
        <br />
        <input type="button" id="checkedAllBtn" value="全　选" />
        <input type="button" id="checkedNoBtn" value="全不选" />
        <input type="button" id="checkedRevBtn" value="反　选" />
        <input type="button" id="sendBtn" value="提　交" />
    </form>

</body>

</html>

dom的其他属性

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>dom其他属性</title>
    <script type="text/javascript">
        window.onload = function () {
            /*获取body标签
            var body=document.getElementsByClassName("body")[0];
            在document
            中有一个属性body，它保存的是body的引用
            documentElement保存的是html根标签
            document.all代表页面中所有的元素(html head body meta title....)
            */
            var body = document.body;
            var html = document.documentElement;
            // console.log(html);
            var all = document.all;

            //    for(var i=0;i<all.length;i++)
            //    console.log(all[i]);

            /*根据元素的class属性查询一组元素节点对象
            兼容性 ie9+ */
            var box1 = document.getElementsByClassName("box1");
            console.log(box1.length);


            /*获取box1中的所有div( .box1 div )           
             document.querySelector()需要一个选择器的字符串作为参数，
             可以根据一个css选择器来查询一个元素节点对象
             虽然IE8中没有getElementsByClassName，但是我们可以通过querySelector
             使用该方法只会返回唯一的元素
             如果满足条件的元素有多个，但是只会返回第一个
            */
            var div = document.querySelector(".box1 div");
            console.log(div.innerHTML);
            /*
            document.querySelectorAll 
            该用法和selector用法类似，不同的是它会将符合条件的元素封装在一个数组里
            */
             //var box1 = document.querySelectorAll(".box1")[0];
            var box1 = document.querySelectorAll(".box1");
            console.log(box1.length);


        }
    </script>
</head>

<body>
    <div class="box1">
        <div>我是div中的box1</div>
    </div>
    <div></div>
</body>

</html>

dom的增加

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>dom的增删改</title>

    <script type="text/javascript">

        function myclick(idstr, fun) {
            var btn = document.getElementById(idstr);
            btn.onclick = fun;
        }


        window.onload = function () {
            //1.创建一个广州节点，绑定在#city下 
            myclick("btn01", function () {

                /*广州节点 是一个li节点
                document.createElement 可以用于创建一个元素节点对象
                想创建什么标签就写什么，将新建好的对象返回

                document.createTextNode可以用来创建一个文本节点对象
                需要一个文本内容作为参数，并且将新的节点返回
                */

                var li = document.createElement("li");
                var gztext = document.createTextNode("广州");
                /* Text是li的子节点，现在开始设置
                appendChild()向一个父节点添加一个新的子节点
                父节点.appendChild(子节点)
                */
                li.appendChild(gztext);

                var city = document.getElementById("city");
                city.appendChild(li);

            });


            //将广州节点插入到#bj前面
            myclick("btn02", function () {

                var li = document.createElement("li");
                var gztext = document.createTextNode("广州");
                li.appendChild(gztext);
                /*insertBefore
                在指定的子节点前插入新的子节点，（找父节点，没有父节点就没有子节点）
                父节点.insertbefore(新结点，旧节点);
                */
                var bj = document.getElementById("bj");
                var city = document.getElementById("city");
                city.insertBefore(li, bj);

            });

            //使用广州节点替换#bj节点
            myclick("btn03", function () {

                var li = document.createElement("li");
                var gztext = document.createTextNode("广州");
                li.appendChild(gztext);
                var bj = document.getElementById("bj");
                var city = document.getElementById("city");
                /*
                replaceChild
                可以使用指定的子节点替换已有的父节点
                （指定子节点的）父节点.replaChild(新结点，旧节点)
                */
                city.replaceChild(li, bj);

            });

            //删除#bj节点
            myclick("btn04", function () {
                var bj = document.getElementById("bj");
                var city = document.getElementById("city");
                /*
                    removeChild可以删除子节点
                    父节点.removeChild(删除的节点)
                    city.removeChild(bj);
                    子节点.parentNode.removeChild(子节点);
                */

                bj.parentNode.removeChild(bj);
            });

            //读取city内的html代码
            myclick("btn05",function(){
                var city=document.getElementById("city");
                console.log(city.innerHTML);
            });

            //设置bj内的html代码
            myclick("btn06",function(){
                var bj=document.getElementById("bj");
                bj.innerHTML="昌平";
            });

            //创建一个广州节点，添加到city下面
            myclick("btn07",function(){
                //使用innerHTML也可以完成相关操作
                var li=document.createElement("li");
                li.innerHTML+="广州";

                var city=document.getElementById("city");
                city.appendChild(li);
               
                
            });
        }

    </script>

</head>
<style>
    body {
        width: 800px;
        margin-left: auto;
        margin-right: auto;
    }

    button {
        width: 300px;
        margin-bottom: 10px;
        text-align: left;
    }

    #btnList {
        float: left;
    }

    #total {
        width: 450px;
        float: left;
    }

    ul {
        list-style-type: none;
        margin: 0px;
        padding: 0px;
    }

    .inner li {
        border-style: solid;
        border-width: 1px;
        padding: 5px;
        margin: 5px;
        background-color: #99ff99;
        float: left;
    }

    .inner {
        width: 400px;
        border-style: solid;
        border-width: 1px;
        margin-bottom: 10px;
        padding: 10px;
        float: left;
    }
</style>

<body>
    <div id="total">
        <div class="inner">
            <p>你喜欢哪个城市?</p>
            <ul id="city">
                <li id="bj">北京</li>
                <li>上海</li>
                <li>东京</li>
                <li>首尔</li>
            </ul>
        </div>
    </div>
    <div id="btnList">
        <div><button id="btn01">1、创建一个"广州"节点,添加到#city下</button></div>
        <div><button id="btn02">2、将"广州"节点插入到#bj前面</button></div>
        <div><button id="btn03">3、使用"广州"节点替换#bj节点</button></div>
        <div><button id="btn04">4、删除#bj节点</button></div>
        <div><button id="btn05">5、读取#city内的HTML代码</button></div>
        <div><button id="btn06">6、设置#bj内的HTML代码</button></div>
        <div><button id="btn07">7、创建一个"广州"节点,添加到#city下</button></div>
        
    </div>

</body>

</html>

添加删除练习1

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>添加删除记录练习</title>

    <script type="text/javascript">

        //点击a删除tr的响应函数
        function delA() {
            /*点击超链接以后，需要删除超链接所在的那一行
                点击哪个超链接，this就是谁
                alert(this);
            获取到当前的tr
            */

            var tr = this.parentNode.parentNode;
            /*获取要删除员工的名字
             var name=tr.getElementsByTagName("td")[0].innerHTML;
             或者
            */
            var name = tr.children[0].innerHTML;
            /*删除之前弹出一个对话框
                     alert("确认删除吗?")
                     alert不行，没有取消删除
             confirm用于弹出一个带有确认和取消按钮的提示框
               它是有返回值的，如果用户点击确认，返回true
            
             */


            if (confirm("确认删除" + name + "吗?")) {
                tr.parentNode.removeChild(tr);
            }



            /*点击超链接以后，超链接会跳转页面
            但是此时我们不希望跳转 通过return false
            或者把超链接的href改为JavaScript:;
            */

            return false;
        }

        window.onload = function () {
            /*1.点击超链接之后，删除员工的信息
            我们要做的就是，首先获取超链接
            */
            var allA = document.getElementsByTagName("a");

            //为每个超链接绑定一个单击响应函数
            for (var i = 0; i < allA.length; i++) {
                allA[i].onclick = delA;
            }


            //2.添加

            var sub = document.getElementById("addEmpButton");
            sub.onclick = function () {
                //获取文本框input中的内容
                var name = document.getElementsByTagName("input")[0];
                // alert(name.value);查看是否正确获取到值
                var email = document.getElementById("email").value;
                //  alert(email.value);
                var salary = document.getElementsByTagName("input")[2];
                // alert(salary.value);
                var tableobj = document.getElementById("employeeTable");
                var trobj = document.createElement("tr");
                //准备新添加一行元素，先获取一个td
                //因为步骤重复，这个地方合成一个函数
                function APPEND(info) {
                    var tdobj = document.createElement("td");
                    tdobj.innerHTML = info;
                    trobj.appendChild(tdobj);
                }
                APPEND(name.value);
                APPEND(email);//把value在上面获取也行
                APPEND(salary.value);
                /* var tdobj = document.createElement("td");
                 tdobj.innerHTML = email.value;
                 trobj.appendChild(tdobj);
 
                 var tdobj = document.createElement("td");
                 tdobj.innerHTML = salary.value;
                 trobj.appendChild(tdobj);*/
                var tdobj = document.createElement("td");
                var aobj = document.createElement("a");
                aobj.innerHTML = "Delete";
                //向a中添加href属性
                aobj.href = "javascript:;";

                //为新添加的a重新添加单击绑定函数
                aobj.onclick = delA;

                tdobj.appendChild(aobj);
                trobj.appendChild(tdobj);

                //获取tableobj的tbody(返回的是一个数组)
                var tbody = tableobj.getElementsByTagName("tbody")[0];
                tbody.appendChild(trobj);


            }
        }
    </script>
</head>
<style>
    #total {
        width: 450px;
        margin-left: auto;
        margin-right: auto;
    }

    ul {
        list-style-type: none;
    }

    li {
        border-style: solid;
        border-width: 1px;
        padding: 5px;
        margin: 5px;
        background-color: #99ff99;
        float: left;
    }

    .inner {
        width: 400px;
        border-style: solid;
        border-width: 1px;
        margin: 10px;
        padding: 10px;
        float: left;
    }

    #employeeTable {
        border-spacing: 1px;
        background-color: black;
        margin: 80px auto 10px auto;
    }

    th,
    td {
        background-color: white;
    }

    #formDiv {
        width: 250px;
        border-style: solid;
        border-width: 1px;
        margin: 50px auto 10px auto;
        padding: 10px;
    }

    #formDiv input {
        width: 100%;
    }

    .word {
        width: 40px;
    }

    .inp {
        width: 200px;
    }
</style>

<body>
    <table id="employeeTable">
        <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Salary</th>
            <th>&nbsp;</th>
        </tr>
        <tr>
            <td>Tom</td>
            <td>tom@tom.com</td>
            <td>5000</td>
            <td><a href="javascript:;">Delete</a></td>
        </tr>
        <tr>
            <td>Jerry</td>
            <td>jerry@sohu.com</td>
            <td>8000</td>
            <td><a href="deleteEmp?id=002">Delete</a></td>
        </tr>
        <tr>
            <td>Bob</td>
            <td>bob@tom.com</td>
            <td>10000</td>
            <td><a href="deleteEmp?id=003">Delete</a></td>
        </tr>
    </table>
    <div id="formDiv">
        <h4>添加新员工</h4>
        <table>
            <tr>
                <td class="word">name: </td>
                <td class="inp">
                    <input type="text" name="empName" id="empName" />
                </td>
            </tr>
            <tr>
                <td class="word">email: </td>
                <td class="inp">
                    <input type="text" name="email" id="email" />
                </td>
            </tr>
            <tr>
                <td class="word">salary: </td>
                <td class="inp">
                    <input type="text" name="salary" id="salary" />
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <button id="addEmpButton" value="abc">
                        Submit
                    </button>
                </td>
            </tr>
        </table>
    </div>
</body>

</html>

添加删除练习2

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>添加删除记录练习</title>

    <script type="text/javascript">

        //点击a删除tr的响应函数
        function delA() {

            var tr = this.parentNode.parentNode;

            var name = tr.children[0].innerHTML;

            if (confirm("确认删除" + name + "吗?")) {
                tr.parentNode.removeChild(tr);
            }

            return false;
        }

        window.onload = function () {

            var allA = document.getElementsByTagName("a");

            //为每个超链接绑定一个单击响应函数
            for (var i = 0; i < allA.length; i++) {
                allA[i].onclick = delA;
            }


            //2.添加

            var sub = document.getElementById("addEmpButton");
            sub.onclick = function () {
                //获取文本框input中的内容
                var name = document.getElementsByTagName("input")[0];
                // alert(name.value);查看是否正确获取到值
                var email = document.getElementById("email").value;
                //  alert(email.value);
                var salary = document.getElementsByTagName("input")[2];
                // alert(salary.value);

                
                var trobj = document.createElement("tr");
                trobj.innerHTML = "<td>" + name.value + "</td>" + "<td>" + email + "</td>" + "<td>" + salary.value + "</td>" +
                    "<td><a href='javascript:;'>Delete</a></td>";


                //获取添加的a元素，并给它绑定单击响应函数
                var a = trobj.getElementsByTagName("a")[0];
                a.onclick = delA;
                var tableobj = document.getElementById("employeeTable");
                 /*
                在代码里面是没有body,但是检查的时候会发现，有，我们需要添加在tbody里面
                而且tbody是table里面的元素
                */
                var tbody=tableobj.getElementsByTagName("tbody")[0];
                
                tbody.appendChild(trobj);


            }
        }
    </script>
</head>
<style>
    #total {
        width: 450px;
        margin-left: auto;
        margin-right: auto;
    }

    ul {
        list-style-type: none;
    }

    li {
        border-style: solid;
        border-width: 1px;
        padding: 5px;
        margin: 5px;
        background-color: #99ff99;
        float: left;
    }

    .inner {
        width: 400px;
        border-style: solid;
        border-width: 1px;
        margin: 10px;
        padding: 10px;
        float: left;
    }

    #employeeTable {
        border-spacing: 1px;
        background-color: black;
        margin: 80px auto 10px auto;
    }

    th,
    td {
        background-color: white;
    }

    #formDiv {
        width: 250px;
        border-style: solid;
        border-width: 1px;
        margin: 50px auto 10px auto;
        padding: 10px;
    }

    #formDiv input {
        width: 100%;
    }

    .word {
        width: 40px;
    }

    .inp {
        width: 200px;
    }
</style>

<body>
    <table id="employeeTable">
        <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Salary</th>
            <th>&nbsp;</th>
        </tr>
        <tr>
            <td>Tom</td>
            <td>tom@tom.com</td>
            <td>5000</td>
            <td><a href="javascript:;">Delete</a></td>
        </tr>
        <tr>
            <td>Jerry</td>
            <td>jerry@sohu.com</td>
            <td>8000</td>
            <td><a href="deleteEmp?id=002">Delete</a></td>
        </tr>
        <tr>
            <td>Bob</td>
            <td>bob@tom.com</td>
            <td>10000</td>
            <td><a href="deleteEmp?id=003">Delete</a></td>
        </tr>
    </table>
    <div id="formDiv">
        <h4>添加新员工</h4>
        <table>
            <tr>
                <td class="word">name: </td>
                <td class="inp">
                    <input type="text" name="empName" id="empName" />
                </td>
            </tr>
            <tr>
                <td class="word">email: </td>
                <td class="inp">
                    <input type="text" name="email" id="email" />
                </td>
            </tr>
            <tr>
                <td class="word">salary: </td>
                <td class="inp">
                    <input type="text" name="salary" id="salary" />
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <button id="addEmpButton" value="abc">
                        Submit
                    </button>
                </td>
            </tr>
        </table>
    </div>
</body>

</html>

a的索引问题

在这里插入图片描述

 window.onload = function () {

            var allA = document.getElementsByTagName("a");

            //为每个超链接绑定一个单击响应函数
            for (var i = 0; i < allA.length; i++) {

                /*for循坏在页面加载完成之后立即执行
                而响应函数会在超链接被点击时才执行
                当响应函数执行时，for循坏早已经执行完毕
                所以响应函数这个3，才是undefined
                */
               alert("for循环正在执行"+i);
                allA[i].onclick = function () {
alert("响应函数正在执行"+i);

                    /*这个地方的this能不能换成allA[i],不可以
                    var tr = this.parentNode.parentNode;*/
                 
                }

            }


            //2.添加

木一叶liuyue

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js基础3 dom基础/绑定获取事件/图片切换练习/文档加载/全选全不选/dom的其他属性/dom的增加/添加删除练习

dom基础<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title
复制链接

扫一扫