Java-JavaScript高階-第34節

Xue__Feng發表於2020-12-08

JavaScript

學習目標：

瞭解DOM的基本概念
熟練掌握DOM的相關操作
理解BOM的各項組成
能夠用BOM配合DOM完成各種複雜功能

學習內容：

一、DOM

1、功能：獲取HTML文件的內容

2、程式碼：獲取頁面標籤（元素）物件 Element

document.getElementById(“Id值”); 通過元素的id獲取元素物件

3、操作Element物件

修改屬性值
- 明確獲取的物件
- 檢視API文件，找到其中可以設定的屬性
修改標籤體內容
- 屬性：innerHTML

二、事件簡單學習

1、功能：某些元件被執行了某些操作後，觸發某些程式碼的執行

2、如何繫結事件

直接在HTML標籤上，指定事件的屬性（操作），屬性值就是js程式碼
- 事件：onclick— 單擊事件
通過js獲取元素物件，指定事件屬性，設定一個函式

三、BOM

1、概念

Browser Object Model：瀏覽器物件模型
- 將瀏覽器的各個組成部分封裝成物件

2、組成

Window：視窗物件
- 建立
  - Window.方法名();
  - 方法名();
- 方法
  - 與彈出框有關的方法
    - alert(); 顯示帶有一段資訊和一個確認按鈕的警示框
    - confirm(); 顯示帶有一段資訊和一個確認按鈕與取消按鈕的對話方塊，返回true或false
    - prompt(); 顯示可提示使用者輸入的對話方塊
      - 引數：提示資訊
      - 返回值：使用者輸入的值
  - 與開啟關閉有關的方法
    - close(); 關閉瀏覽器視窗
      - 關閉呼叫該方法的視窗
    - open(); 開啟新的瀏覽器視窗
      - 引數為開啟視窗指向的URL地址
      - 返回新視窗的視窗物件
  - 與定時器有關的方法
    - setTimeout(); 在指定的毫秒數後呼叫函式或計算表示式
      - 引數：
        js程式碼或者方法物件
        毫秒值
      - 返回值：
        唯一標識，用於取消定時器
    - clearTimeout(); 取消由setTimeout設定的timeout
    - setInterval(); 按照指定的週期（以毫秒計）來呼叫函式或計算表示式
    - clearInterval();取消由setInterval設定的timeout
- 屬性
  - 獲取其他DOM物件
    - History
    - Location
    - Navigator
    - Screen
  - 獲取DOM物件
    - document
- 特點
  - Window物件可以不用建立，直接使用
  - Window引用可以省略
Navigator：瀏覽器物件
Screen：顯示器螢幕物件
History：歷史記錄物件
- 建立（獲取）
- 方法
  - back() 載入 history 列表中的前一個 URL
  - forward() 載入 history 列表中的下一個 URL
  - go(引數) 載入 history 列表中的某個具體頁面
    - 引數：整數前進或後退幾個歷史記錄
- 屬性
  - length 返回歷史列表中的網址數
Location：位址列物件
- 建立（獲取）
  - 通過Window獲取
- 方法
  - reload() 重新載入當前文件
- 屬性
  - href 返回完整的URL

四、DOM

1、概念：Document Object Model：文件物件模型

將標記語言文件的各個組成部分封裝為物件，可以使用這些物件對標記語言文件進行CRUD操作

2、W3C DOM標準被分為3個不同的部分

核心 DOM - 針對任何結構化文件的標準模型
- Document：文件物件
  - 建立（獲取）在html dom模型中可以使用Window物件來獲取
    - Window.document
    - document
  - 方法
    - 獲取element物件
      - document.getElementById() 返回對擁有指定 id 的第一個物件的引用。
      - document.getElementsByTagName() 返回帶有指定標籤名的物件集合。
      - document.getElementsByClassName() 返回文件中所有指定類名的元素集合，作為 NodeList 物件。
      - document.getElementsByName() 返回帶有指定名稱的物件集合。
    - 建立其它DOM物件
      - document.createElement() 建立元素節點。
      - document.createAttribute() 建立一個屬性節點
      - document.createComment() createComment() 方法可建立註釋節點。
      - document.createTextNode() 建立文字節點。
- Element：元素物件
  - 建立（獲取）在html dom模型中可以使用Window物件來獲取
  - 方法
    - element.setAttribute() 設定或者改變指定屬性並指定值。
    - element.removeAttribute() 從元素中刪除指定的屬性
- Attribute：屬性物件
- Text：文字物件
- Comment：註釋物件
- Node：節點物件，其它5個的父物件
  - 特點：所有DOM物件都可以被認為是一個節點
  - 方法
    - CRUD DOM樹
      - appendChild() 把新的子節點新增到節點的子節點列表末尾。
      - removeChild() 刪除子節點。
      - replaceChild() 替換子節點。
  - 屬性
    - parentNode 返回節點的父節點。
XML DOM - 針對XML文件的標準模型
HTML DOM - 針對HTML文件的標準模型
- 標籤體的設定和獲取：innerHTML
- 使用HTML元素物件的屬性
- 控制元素樣式
  - 使用元素的style屬性來設定
  - 提前定義好類選擇器的樣式，通過元素的className屬性來設定其class屬性值

五、事件

1、概念

事件：某些操作如：單擊、雙擊、鍵盤按下了、滑鼠移動了
事件源：元件如：按鈕、文字輸入框
監聽器：程式碼
註冊監聽：將事件、事件源、監聽器結合在一起，當事件源上發生某個事件，則觸發執行某個監聽器程式碼

2、常見的事件

點選事件
- onclick 當使用者點選某個物件時呼叫的事件控制程式碼。
- ondblclick 當使用者雙擊某個物件時呼叫的事件控制程式碼。
焦點事件
- onblur 元素失去焦點時觸發
  - 一般用於表單驗證
- onfocus 元素獲取焦點時觸發
載入事件
- onload 一張頁面或一幅影像完成載入。
滑鼠事件
- onmousedown 滑鼠按鈕被按下。
- onmouseup 滑鼠按鍵被鬆開。
- onmouseover 滑鼠移到某元素之上。
- onmousemove 滑鼠被移動。
- onmouseout 滑鼠從某元素移開。
鍵盤事件
- onkeydown 某個鍵盤按鍵被按下。
- onkeypress 某個鍵盤按鍵被按下並鬆開。
- onkeyup 某個鍵盤按鍵被鬆開。
選擇和改變
- onchange 該事件在表單元素的內容改變時觸發( , , , 和 )
- onselect 使用者選取文字時觸發 ( 和 )
表單事件
- onsubmit 表單提交時觸發
- onreset 表單重置時觸發

學習產出：

1、 DOM獲取元素物件並執行相關操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>獲取元素物件並執行相關操作</title>
</head>
<body>
    <img src="img/off.gif" id="light-off">
    <h1 id="text">Hello World!!!</h1>
    <script>
        var light = document.getElementById("light-off");
        alert("Change the picture!");
        light.src = "img/on.gif";

        var text = document.getElementById("text");
        text.innerHTML = "Hello EveryOne!!!";
    </script>
</body>
</html>

2、事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件</title>

</head>
<body>
    <!--<img src="img/off.gif"  οnclick="alert('Turn On!!!')">-->
    <!--<img src="img/off.gif" id="light-off" οnclick="turnOn()">-->
    <img src="img/off.gif" id="light-off">
    <script>
        function turnOn() {
            alert("Trun On!");
            var light = document.getElementById("light-off");
            light.src = "img/on.gif";
        }
        var light = document.getElementById("light-off");
        light.onclick = turnOn;
    </script>
</body>
</html>

3、電燈開關案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>電燈開關案例</title>

</head>
<body>
    <img src="img/off.gif" id="light-off" >
    <script>
        var light = document.getElementById("light-off");
        var flag = false;
        light.onclick = function turn(){
            if (flag){
                light.src = "img/off.gif";
                flag = false;
            } else {
                light.src = "img/on.gif";
                flag = true;
            }
        }
    </script>
</body>
</html>

4、視窗物件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>視窗物件</title>

</head>
<body>
    <!--<img src="img/off.gif" id="light-off" >-->
    <!--<input type="button" id="buto" value="開啟視窗">-->
    <!--<input type="button" id="butc" value="關閉視窗">-->
    <script>
        // 與彈出框有關的方法
        // alert("Hello !!!");
        // var confirm = confirm("Please make sure !");
        // document.write(confirm);
        // var msg = prompt("Please Input your Message!");
        // document.write(msg);

        // 與開啟關閉有關的方法
        // var buttono = document.getElementById("buto");
        // buttono.onclick = function () {
        //     win = open("http://www.baidu.com/");
        // };
        // var buttonc = document.getElementById("butc");
        // buttonc.onclick = function () {
        //     win.close();
        // };

        // 與定時器有關的方法
        function boom() {
            alert("Boom~~~");
        }
        // var timeout1 = setTimeout(boom,2000);
        // setTimeout("boom()",2000);
        // setTimeout("alert('Boom !!!')",3000);
        // timeout1.clearTimeout();

        var inte = setInterval(boom,1000);
        inte.clear();
    </script>
</body>
</html>

5、輪播圖案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>輪播圖案例</title>
</head>
<body>
    <!--
    分析：
        1、在頁面上使用img標籤展示圖片
        2、定義一個方法，修改影像對應的src屬性
        3、定義一個定時器，每隔3秒呼叫一次方法
    -->
    <img src="img/banner_1.jpg" id="img" width="100%">
    <script>
        var num = 1;
        function change() {
            if (num > 3) {
                num = 1;
            } else {
                num++;
            }
            var img = document.getElementById("img");
            img.src = "img/banner_"+num+".jpg";
        }
        var interval = setInterval(change,3000);
    </script>
</body>
</html>

6、位址列物件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>位址列物件</title>
</head>
<body>
    <input type="button" value="重新整理" id="flush">
    <input type="button" value="百度" id="baidu">

    <script>
        var flush = document.getElementById("flush");
        flush.onclick = function () {
            location.reload();
        };
        var baidu = document.getElementById("baidu");
        baidu.onclick = function () {
            location.href = "http://www.baidu.com/";
        };
        var href = location.href;
        alert(href);
    </script>
</body>
</html>

7、自動跳轉案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自動跳轉案例</title>
    <style>
        p {
            text-align: center;
        }
        span {
            color: #e32e35;
        }
    </style>
</head>
<body>
    <!--
    分析：
        1、顯示頁面效果 <p>
        2、秒數倒數計時 定時器
            -   定義一個方法，獲取span標籤，修改span標籤體內容，時間
            -   定義一個定時器，一秒執行一次該方法
        3、
    -->
    <p>
        <span id="time">5</span>秒之後，自動跳轉到首頁 ...
    </p>

    <script>
        var second = 5;
        var time = document.getElementById("time");
        function showTime() {
            second--;
            if (second <= 0){
                location.href = "http://www.baidu.com/";
            }
            time.innerHTML = second + "";
        }
        setInterval(showTime,1000);
    </script>
</body>
</html>

8、歷史記錄物件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>歷史記錄物件</title>
</head>
<body>
    <input type="button" value="歷史記錄" id="butt">
    <input type="button" value="前進" id="forword">
    <input type="button" value="輪播圖" id="cross">
    <input type="button" value="後退" id="back">
    <script>
        var his = document.getElementById("butt");
        his.onclick = function () {
            var length = history.length;
            alert(length);
        };
        var cross = document.getElementById("cross");
        cross.onclick = function () {
            location.href = "Demo07AutoJumpTrain.html";
        };
        var forword = document.getElementById("forword");
        forword.onclick = function () {
            history.forward();
        };
        var back = document.getElementById("back");
        back.onclick = function () {
            history.back();
        };
    </script>
</body>
</html>

9、 Document物件

<!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="cls">div4</div>
    <div class="cls">div5</div>

    <label>
        <input type="text" name="username">
    </label>
    <script>
        // 獲取Element元素的方法
        var byId = document.getElementById("div1");
        document.write(byId.length);

        var byTagName = document.getElementsByTagName(div);
        document.write(byTagName.length);

        var byClassName = document.getElementsByClassName("cls");
        document.write(byClassName.length);

        var byName = document.getElementsByName("username");
        document.write(byName.length);
    </script>
</body>
</html>

10、Element物件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Element物件</title>
</head>
<body>
    <a> Please click on me !!! </a>

    <input type="button" name="set" value="SetAttr">
    <input type="button" name="remove" value="RemoveAttr">
    <script>
        var add = document.getElementsByName("set")[0];
        add.onclick = function () {
            var link1 = document.getElementsByTagName("a")[0];
            link1.setAttribute("href","https://www.baidu.com/");
        };

        var remove = document.getElementsByName("remove")[0];
        remove.onclick = function () {
            var link2 = document.getElementsByTagName("a")[0];
            link2.removeAttribute("href");
        }
    </script>
</body>
</html>

11、 Node物件

<!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: 50px;
            height: 50px;
        }

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

    <!--
    超連結功能：
        1、可以被點選，樣式
        2、點選後跳轉到href指定的url
    需求：保留1功能，刪除2功能
    實現：href = "javascript:void(0)"
    -->

    <a href="javascript:void(0)" id="del"> 刪除子節點 </a>
    <a href="javascript:void(0)" id="add"> 新增子節點 </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>

12、動態表格案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>動態表格案例</title>
    <style>
        table {
            border: 1px solid red;
            text-align: center;
            width: 50%;
            margin: auto;
        }
        th,tr,td {
            border: 1px solid black;
            text-align: center;
        }

        caption {
            font-size: 22px;
            margin: 10px;
        }
        div {
            position: relative;
            padding: 10px;
            margin: auto;
            width: 50%;
            /*border: 1px solid black;*/
        }
        input {
            position: absolute;
            right: 440px;
        }

    </style>
</head>
<body>
    <!--
    分析：
        1、新增
            -   給新增按鈕繫結單擊事件
            -   獲取文字框的內容
            -   建立td，設定td的文字為文字框的內容
            -   建立tr
            -   將td新增到tr中
            -   獲取table，將tr新增到table中
        2、刪除
            -   確定點選刪除位置
                -   <a href="javascript:void(0);" οnclick="delTr(this)">Delete</a>
            -   怎麼刪除？
                -   removeChild();  通過父節點進行刪除
    -->
    <div>
        <label for="id">ID：</label><input type="text" id="id"><br>
        <label for="name">姓名：</label><input type="text" id="name"><br>
        <label for="gender">性別：</label><input type="text" id="gender"><br>
        <input type="button" value="新增資訊" id="add">
    </div>
    <table id="tab">
        <caption>學生資訊表</caption>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Gender</th>
            <th>Operate</th>
        </tr>
    </table>

    <script>
        document.getElementById("add").onclick = function () {
            var id = document.getElementById("id").value;
            var name = document.getElementById("name").value;
            var gender = document.getElementById("gender").value;

            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 a = document.createElement("a");
            var text_a = document.createTextNode("Delete");
            a.setAttribute("href","javascript:void(0)");
            a.setAttribute("onclick","delTr(this)");
            a.appendChild(text_a);
            td_a.appendChild(a);


            var tr = document.createElement("tr");
            tr.appendChild(td_id);
            tr.appendChild(td_name);
            tr.appendChild(td_gender);
            tr.appendChild(td_a);

            var table = document.getElementById("tab");
            table.appendChild(tr)
        };
        function delTr(obj) {
            var tr = obj.parentElement.parentElement;
            var parentElement = tr.parentElement;
            parentElement.removeChild(tr);
        }
    </script>
</body>
</html>

13、 HTML DOM

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML DOM</title>
    <style>
        table {
            border: 1px solid red;
            text-align: center;
            width: 50%;
            margin: auto;
        }
        th,tr,td {
            border: 1px solid black;
            text-align: center;
        }

        caption {
            font-size: 22px;
            margin: 10px;
        }
        div {
            position: relative;
            padding: 10px;
            margin: auto;
            width: 50%;
            /*border: 1px solid black;*/
        }
        input {
            position: absolute;
            right: 440px;
        }

    </style>
</head>
<body>
    <div>
        <label for="id">ID：</label><input type="text" id="id"><br>
        <label for="name">姓名：</label><input type="text" id="name"><br>
        <label for="gender">性別：</label><input type="text" id="gender"><br>
        <input type="button" value="新增資訊" id="add">
    </div>
    <table id="tab">
        <caption>學生資訊表</caption>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Gender</th>
            <th>Operate</th>
        </tr>
    </table>

    <!--<div>-->
        <!--div-->
    <!--</div>-->


    <script>
        // var div = document.getElementsByTagName("div")[0];
        // var innerHTML = div.innerHTML;
        // div.innerHTML = "<input type='text'/>";
        // div.innerHTML += "<input type='text'/>";

        document.getElementById("add").onclick = function () {
            var id = document.getElementById("id").value;
            var name = document.getElementById("name").value;
            var gender = document.getElementById("gender").value;


            document.getElementsByTagName("table")[0].innerHTML += "" +
                "    <tr>\n" +
                "        <td>"+id+"</td>\n" +
                "        <td>"+name+"</td>\n" +
                "        <td>"+gender+"</td>\n" +
                "        <td><a href=\"javascript:void(0);\" οnclick=\"delTr(this);\">Delete</a></td>\n" +
                "    </tr>\n";
        };
        function delTr(obj) {
            var tr = obj.parentElement.parentElement;
            var parentElement = tr.parentElement;
            parentElement.removeChild(tr);
        }
    </script>
</body>
</html>

14、樣式控制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>樣式控制</title>
    <style>
        .div1 {
            border: 1px solid red;
            width: 50%;
            margin: auto;
        }
        .div2 {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div id="div1">
        div1
    </div>

    <div id="div2">
        div2
    </div>


    <script>
        document.getElementById("div1").onclick = function () {
            this.style.border = "1px solid red";
        };
        document.getElementById("div2").onclick = function () {
            this.className = "div2";
        };
    </script>


</body>
</html>

15、常見事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常見事件</title>
    <script>
        window.onload = function () {
            var tmp = document.getElementsByTagName("input")[0];
            /*tmp.onblur = function () {
                alert("焦點失去了~~~");
            };*/

            /*tmp.onmouseover = function () {
                alert("滑鼠來了~~~")
            };*/

            tmp.onmousedown = function (event) {
                // alert("滑鼠點選了~~~");
                // alert(event.button);
            };

            /*tmp.onkeydown = function (event) {
                // alert("鍵盤點選了~~~");
                // alert(event.button);
                alert(event.keyCode);
            };*/

            /*document.getElementById("location").onchange = function () {
                alert("改變了~~~");
            };*/

            /*document.getElementsByTagName("form")[0].onsubmit = function () {
                var flag = false;
                return flag;
            };*/

            function checkForm() {
                return false;
            };
        };
    </script>
</head>
<body>
    <form action="#" onclick="return checkForm();">
        <input type="text">
        <select name="city" id="location">
            <option value="0">--請選擇--</option>
            <option value="1">海南</option>
            <option value="2">北京</option>
            <option value="3">上海</option>
        </select>
        <input type="submit" value="提交">
    </form>
<!--
    <script>
        var tmp = document.getElementsByTagName("input")[0];
        tmp.onblur = function () {
            alert("焦點失去了~~~");
        };
    </script>
-->


</body>
</html>

每週分享第 34 期
2018-12-07
第32篇 .Net特性Attribute的高階使用
2024-10-15
Web Audio API 第6章高階主題
2024-04-30
WebAPI
第3章第10節 Java進階 - JVM記憶體機制（中）
2020-09-27
JavaJVM記憶體
Visual Studio 2017高階程式設計(第7版)
2018-10-16
程式設計
高階前端開發者必會的34道Vue面試題系列（二）
2020-03-23
前端Vue面試題
高階前端開發者必會的34道Vue面試題解析（三）
2020-03-30
前端Vue面試題
【JavaScript高階進階】JavaScript變數/函式提升的細節總結
2018-08-07
JavaScript變數函式
高階程式語言設計第5次作業
2024-11-02
高階語言程式設計第2次作業
2024-10-07
程式設計
高階程式設計語言第2次作業
2024-10-01
程式設計
[譯] Xcode 和 LLDB 高階除錯教程：第 3 部分
2019-07-24
XCodeLLDB高階除錯
Oracle高階培訓第5課學習筆記
2020-04-04
Oracle筆記
Oracle高階培訓第6課學習筆記
2020-04-04
Oracle筆記
Oracle高階培訓第7課學習筆記
2020-04-04
Oracle筆記
JS高階程式設計第3章--精簡版
2019-07-12
JS程式設計
[譯] Xcode 和 LLDB 高階除錯教程：第 1 部分
2019-06-20
XCodeLLDB高階除錯
JS高階程式設計第2章--精簡版
2019-07-11
JS程式設計
【讀書筆記】JavaScript高階程式設計（第3版）（第5-7章）
2018-05-25
筆記JavaScript程式設計
第 5 節：常量
2019-11-17
從高階函式--->高階元件
2018-05-20
函式元件
java進階(34)--File類、目錄複製
2021-01-27
Java
[開發教程]第34講：Bootstrap摺疊內容
2019-05-11
boot
韭菜創業日記第34篇：日常大曝光
2018-05-04
創業
第 9 節：工程管理
2019-12-03
第 3 節：變數
2019-11-15
變數
第 10 節指標
2018-07-14
指標
《JavaScript高階程式設計（第4版）》資源連結清單
2020-09-14
JavaScript程式設計
《 Angular高階程式設計(第4版)》之“Angular 基礎知識”
2021-02-02
Angular程式設計
Java高階開發必會的50個效能優化細節
2019-03-21
Java優化
第 34 題：如何實現二叉查詢樹？
2021-09-09
高階前端進階（七）
2022-12-17
前端
高階前端進階（五）
2022-05-09
前端
高階前端進階（三）
2021-11-22
前端
js高階
2021-10-10
JS
MYSQL 高階
2021-06-01
MySql
Sentinel高階
2021-03-11
MySQL高階
2021-03-07
MySql

Java-JavaScript高階-第34節

學習目標：

學習內容：

一、DOM

1、功能：獲取HTML文件的內容

2、程式碼：獲取頁面標籤（元素）物件 Element

3、操作Element物件

二、事件簡單學習

1、功能：某些元件被執行了某些操作後，觸發某些程式碼的執行

2、如何繫結事件

三、BOM

1、概念

2、組成

四、DOM

1、概念：Document Object Model：文件物件模型

2、W3C DOM標準被分為3個不同的部分

五、事件

1、概念

2、常見的事件

學習產出：

1、 DOM獲取元素物件並執行相關操作

2、事件

3、 電燈開關案例

4、 視窗物件

5、 輪播圖案例

6、 位址列物件

7、 自動跳轉案例

8、 歷史記錄物件

9、 Document物件

10、Element物件

11、 Node物件

12、動態表格案例

13、 HTML DOM

14、 樣式控制

15、 常見事件

相關文章

3、電燈開關案例

4、視窗物件

5、輪播圖案例

6、位址列物件

7、自動跳轉案例

8、歷史記錄物件

14、樣式控制

15、常見事件