JavaWeb——JavaScript精讲之DOM、BOM对象与案例实战（动态添加删除表格）

Winter_world

发布于 2020-09-25 10:22:10

2.2K0

发布于 2020-09-25 10:22:10

文章被收录于专栏：技术小屋-未分类

上一博文种讲解了JavaScript基础的ECMAScript，包括基本语法和部分对象，本文中继续讲解JavaScript中比较重要的两部分内容BOM、DOM及事件，后文中有对应的实战练习。

1、DOM简单学习

DOM是用来控制html文档的内容的： 1）document.getElementById("id值")：通过元素id获取元素对象Element。 2）操作Element对象：

修改属性值：要明确获取的对象是哪一个，再查看API，找其中有哪些属性可以设置；
修改标签体内容：通过属性innerHTML修改

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM简单应用</title>
    
</head>
<body>
    <img id="nezha" src="../image/2.png">
    <h1 id="title"> 百度一下</h1>
    <script>
        //通过id获取元素对象
        var nezha = document.getElementById("nezha");
        alert("换图片");
        nezha.src = "../image/1.png";

        var text = document.getElementById("title");
        alert("换标签");
        text.innerHTML = "你就知道";
    </script>
</body>
</html>

2、事件的简单学习

事件的功能就是，某些组件被执行了某些操作后，触发某些代码的执行，如何绑定事件？

直接在html标签上指定事件的属性（操作），属性值就是js代码，耦合度较高；
通过js获取元素对象，指定事件属性，设置函数，耦合度比较低；

【举例】：事件的简单应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件的简单应用</title>

</head>
<body>
    <img id="nezha" src="../image/2.png" onclick="fun();">
    <img id="nezha2" src="../image/2.png">

    <script>
        function fun() {
            alert('我被点击了');
        }
        var nezha2 = document.getElementById("nezha2");
        nezha2.onclick = fun;
    </script>

</body>
</html>

3、BOM对象

BOM，Browser Object Model，浏览器对象模型，就是将浏览器的各个组成部分封装成对象，如下浏览器示例：

BOM的组成包括：

Window：窗口对象
Navigator：浏览器对象
Screen：显示器屏幕对象
History：历史记录对象
Location：地址栏对象

1）Window窗口对象 方法：1、与弹出框有关的： alert()，显示有一段消息或警告窗口； confirm()，显示一段消息以及确认和取消按钮的对话框，用户点击确认按钮，则返回true，否则为false； prompt()，显示可提示用户输入的对话框，用的较少。返回值，获取用户输入的值。 2、与打开关闭有关的： open()，打开新的浏览器窗口，返回一个新的window对象 close()，关闭浏览器窗口，谁调用我我关闭谁

    <input id="btnOpen" type="button" value="打开窗口">
    <input id="btnClose" type="button" value="关闭窗口">

    <script>
        var btnOpen = document.getElementById("btnOpen");
        var newWindow;
        btnOpen.onclick = function(){
            newWindow = open("https://www.baidu.com");
        }
        var btnClose = document.getElementById("btnClose");
        btnClose.onclick = function(){
            newWindow.close();
        }
    </script>

3、与定时器有关的： setTimeout()，指定的ms后调用函数或计算表达式，返回值为唯一标识，用于取消定时器； clearTimeout()，取消由setTimeout()方法设置的timeout； setInterval()，按照指定的周期进行，返回值为唯一标识，用于取消定时器； clearInterval()，取消由setInterval()方法设置的timeout；

属性：1、获取其他BOM对象：history、location、Navigator、Screen； 2、获取DOM对象：window.document. 特点：1、不需要创建对象，可以直接使用，window.方法名()； 2、window引用可以省略，方法名()；

【举例】：轮播图的实现，实现思路：

页面上使用img标签展示图片；
定义一个方法，修改图片对象的src属性；
定义一个定时器，每隔3s调用一次方法；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM案例——轮播图</title>

</head>
<body>
    <img id="img" src="../image/7演示图片.jpg" width="100%">

    <script>
        var number = 7;
        function fun() {
            number++;
            if(number>8){
                number=7;
            }
            var img = document.getElementById("img");
            img.src = "../image/"+number+"演示图片.jpg";
        }
        setInterval(fun,3000);
    </script>

</body>
</html>

2）Location地址栏对象

创建：1、window.location 2、location 属性：1、href，设置或返回完整的URL 方法：1、reload()，刷新页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Location对象</title>

</head>
<body>
    <input id="btn" type="button" value="刷新">
    <input id="btn1" type="button" value="去百度">

    <script>
        var btn = document.getElementById("btn");
        btn.onclick = function () {
            location.reload();
        }
        //获取href
        var href = location.href;
        alert(href);

        var btn1 = document.getElementById("btn1");
        btn1.onclick = function () {
            location.href = "https://www.baidu.com";
        }
    </script>

</body>
</html>

【举例】自动跳转首页，实现思路：

1）显示页面效果，p标签
2）倒计时读秒效果实现，定义一个方法，获取span标签，修改标签体内容；
3）定义一个定时器，1s执行一次

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自动跳转首页</title>
    <style>
        p{
            text-align: center;
        }
        span{
            color: red;
        }
    </style>

</head>
<body>
    <p>
        <span id="time"> 5 </span> 秒后，自动跳转到首页...
    </p>

    <script>
        var sec = 5;
        var time = document.getElementById("time");
        function showTime() {
            sec--;
            if(sec<=0){
                location.href = "https:www.baidu.com";
            }
            time.innerHTML = sec+"";
        }

        setInterval(showTime,1000);
    </script>

</body>
</html>

2）History历史记录对象

当前window窗口访问过的历史记录。

创建：1、window.history 2、history 属性：1、length，返回当前浏览器窗口的浏览历史记录； 方法：1、back()，加载history 列表中的前一个URL； 2、forward()，加载history列表中的下一个URL； 3、go()，加载history列表中的某一个具体页面；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>History对象</title>

</head>
<body>
    <input type="button" id="btn" value="获取历史记录个数">

    <script>
        var btn = document.getElementById("btn");
        btn.onclick = function () {
            var length = history.length;
            alert(length);
        }
    </script>

</body>
</html>

4、DOM对象

DOM，Document Object Model，文档对象模型，就是将标记语言文档的各个组成部分封装为对象，可以使用这些对象对标记语言文档进行CRUD操作。

W3C DOM 标准被分为3个不同的部分：

核心 DOM：针对任何结构化文档的标准模型； Document：文档对象； Element：元素对象； Attribute：属性对象； Text：文本对象； Comment：注释对象； Node：节点对象，其他5个的父对象；
XML DOM：针对XML文档的标准模型；
HTML DOM：针对HTML文档的标准模型；

1）Document对象

创建：在html dom模型中，可以使用window对象来获取，window.document、document 方法：1、获取Element对象； getElement()方法，根据id属性值获取元素对象； getElementsByTagName()方法，根据元素名称获取元素对象们，返回值是一个数组； getElementsByClassName()方法，根据class属性值获取元素对象们，返回值是一个数组； getElementsByName()方法，根据name属性值获取元素对象们，返回值是一个数组；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document对象</title>

</head>
<body>
    <div id="div1"> div1 </div>
    <div id="div2"> div2 </div>
    <div id="div3"> div3 </div>

    <div class="class1"> div4 </div>
    <div class="class1"> div5 </div>

    <input type="text" name="username">

    <script>
        var divs = document.getElementsByTagName("div");
        alert(divs.length); //5

        var divs1 = document.getElementsByClassName("class1");
        alert(divs1.length); //2

        var divs2 = document.getElementsByName("username");
        alert(divs2.length); //1
    </script>
</body>
</html>

2、创建其他DOM对象方法： createAttribute(name) createComment() createElement() createTextNode()

2）Element对象

创建：通过document来创建/获取； 方法：1、removeAttribute()，删除属性； 2、setAttribute()，设置属性；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document对象</title>

</head>
<body>
    <a> 点我一下 </a>
    <input id="btn" type="button" value="设置a标签属性">
    <input id="btn1" type="button" value="删除a标签属性">

    <script>
        btn = document.getElementById("btn");
        btn.onclick = function () {
            var ele = document.getElementsByTagName("a")[0];
            ele.setAttribute("href","https://www.baidu.com");
        }

        btn1 = document.getElementById("btn1");
        btn1.onclick = function () {
            var ele = document.getElementsByTagName("a")[0];
            ele.removeAttribute("href");
        }

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

3）Node对象，是其他5个对象的父对象

特点：所有dom对象都可以被认为是一个节点； 方法：1、CRUD dom树： appendChild()，向节点的子节点列表的结尾添加新的子节点； removeChild()，删除（并返回）当前节点的指定子节点； replaceChild()，用新节点替换一个子节点； 2、setAttribute()，设置属性； 属性：parrentNode 返回节点的父节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Node对象</title>
    <style>
        div{
            border: 1px solid red;
        }
        #div1{
            width: 200px;
            height: 200px;
        }
        #div2{
            width: 100px;
            height: 100px;
        }
        #div3{
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div id="div1">
        <div id="div2"> div2 </div>
        div1
    </div>
    <a id="del" href="javascript:void(0);"> 删除子节点</a>
    <a id="add" href="javascript:void(0);"> 添加子节点</a>

    <script>
        var del = document.getElementById("del");
        del.onclick  = function () {
            var div1  = document.getElementById("div1");
            var div2  = document.getElementById("div2");
            div1.removeChild(div2);
        }
        
        var add = document.getElementById("add");
        add.onclick  = function () {
            var div1  = document.getElementById("div1");
            var div3 = document.createElement("div");
            div3.setAttribute("id","div3");
            div1.appendChild(div3);
        }
    </script>
</body>
</html>

4）HTML DOM

标签体的设置与获取：innerHTML
使用html元素对象的属性
控制样式：style属性：eg：元素名称.style.border="1px solid red"; 提前定义好类选择器的样式，通过元素属性的className属性来设置class的属性值，应用较多；

5、动态表格案例实战

1）添加表格的实现思路：

* 1、给添加按钮绑定单击事件 * 2、获取文本框内容 * 3、创建td，设置td的文本为文本框的内容 * 4、创建tr，将td添加到tr中 * 5、获取table，将tr添加到table中

2）删除表格的实现思路：

* 1、确定点击的是哪一个超链接 * 2、再删除

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态表格案例</title>
    <style>
        table{
            border: 1px solid;
            margin: auto;
            width: 500px;
        }
        td,th{
            text-align: center;
            border: 1px solid;
        }
        div{
            text-align: center;
            margin: 50px;
        }
    </style>
</head>
<body>
    <div>
        <input type="text" id="id" placeholder="请输入编号">
        <input type="text" id="name" placeholder="请输入姓名">
        <input type="text" id="gender" placeholder="请输入性别">
        <input type="button" id="btn_add" value="添加">
    </div>
    <table>
        <caption>学生信息表</caption>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>操作</th>
        </tr>
        <tr>

        </tr>
    </table>
    <script>
        /*添加
        * 1、给添加按钮绑定单击事件
        * 2、获取文本框内容
        * 3、创建td，设置td的文本为文本框的内容
        * 4、创建tr，将td添加到tr中
        * 5、获取table，将tr添加到table中
        * 删除：
        * 1、确定点击的是哪一个超链接
        * 2、再删除
        * */
        document.getElementById("btn_add").onclick = function () {
            var id = document.getElementById("id").value;
            var name = document.getElementById("name").value;
            var gender = document.getElementById("gender").value;
            //创建td
            var td_id = document.createElement("td");
            var text_id = document.createTextNode(id);
            td_id.appendChild(text_id);
            var td_name = document.createElement("td");
            var text_name = document.createTextNode(name);
            td_name.appendChild(text_name);
            var td_gender = document.createElement("td");
            var text_gender = document.createTextNode(gender);
            td_gender.appendChild(text_gender);
            var td_a = document.createElement("td");
            var ele_a = document.createElement("a");
            ele_a.setAttribute("href","javascript:void(0);");
            ele_a.setAttribute("onclick","del(this);")
            var text_a = document.createTextNode("删除");
            ele_a.appendChild(text_a);
            td_a.appendChild(ele_a);
            //创建tr
            var tr = document.createElement("tr");
            tr.appendChild(td_id);
            tr.appendChild(td_name);
            tr.appendChild(td_gender);
            tr.appendChild(td_a);
            //创建table
            var table = document.getElementsByTagName("table")[0];
            table.append(tr);
        }
        //删除方法
        function del(obj) {
            var table = obj.parentNode.parentNode.parentNode;
            var tr = obj.parentNode.parentNode;
            table.removeChild(tr);
        }
    </script>
</body>
</html>

以上的方式看起来效果不错，但是，各位看官别急，我们使用innerHTML的方式来实现，效果更佳，代码更精简：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态表格案例</title>
    <style>
        table{
            border: 1px solid;
            margin: auto;
            width: 500px;
        }
        td,th{
            text-align: center;
            border: 1px solid;
        }
        div{
            text-align: center;
            margin: 50px;
        }
    </style>
</head>
<body>
<div>
    <input type="text" id="id" placeholder="请输入编号">
    <input type="text" id="name" placeholder="请输入姓名">
    <input type="text" id="gender" placeholder="请输入性别">
    <input type="button" id="btn_add" value="添加">
</div>
<table>
    <caption>学生信息表</caption>
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>操作</th>
    </tr>
    <tr>

    </tr>
</table>
<script>

    document.getElementById("btn_add").onclick = function () {
        var id = document.getElementById("id").value;
        var name = document.getElementById("name").value;
        var gender = document.getElementById("gender").value;
        //获取table
        var table = document.getElementsByTagName("table")[0];
        table.innerHTML += "<tr> " +
            "<td> "+id+" </td>" +
            "<td>"+name+"</td> " +
            "<td>"+gender+"</td> " +
            "<td><a href=\"javascript:void(0);\" onclick='del(this)'>删除</a></td>" +
            "</tr>";
    }
    //删除方法
    function del(obj) {
        var table = obj.parentNode.parentNode.parentNode;
        var tr = obj.parentNode.parentNode;
        table.removeChild(tr);
    }
</script>
</body>
</html>

本文为博主原创文章，转载请注明出处。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020/05/21 ，如有侵权请联系 cloudcommunity@tencent.com 删除

html

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

html

登录后参与评论

0 条评论

热度