上一博文種講解了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" οnclick="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);\" οnclick='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>

本文爲博主原創文章，轉載請註明出處，若本文對您有些許幫助，輕擡您高貴的小手，關注/評論/點贊/收藏，就是對我最大的支持，多謝，祝君升職加薪，鵬程萬里！

JavaWeb——JavaScript精講之DOM、BOM對象與案例實戰（動態添加刪除表格）

1、DOM簡單學習

2、事件的簡單學習

3、BOM對象

4、DOM對象

5、動態表格案例實戰

Spring Cloud 部署時如何使用 Kubernetes 作爲註冊中心和配置中心

KubeKey 部署 K8s v1.28.8 實戰

Java——數據庫編程JDBC之數據庫連接池技術（C3P0與Druid，提供了Druid的工具類）

Java——數據庫編程JDBC之快速入門總結及各類詳解（提供了JDBCUtils工具類）

MySQL數據庫——DCL管理用戶以與授權&忘記root密碼的解決方案

MySQL數據庫——事務的操作（開啓、回滾、提交）、特徵、隔離級別基礎總結

MySQL數據庫——多表查詢之內連接查詢、外連接查詢、子查詢

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結