JavaScript(ECMAScript+BOM+DOM)

菜鳥界的菜鳥發表於2020-09-28
JavaScript

# 今日內容：
    1. JavaScript：
        1. ECMAScript：
        2. BOM：
        3. DOM：
            1. 事件

## DOM簡單學習：為了滿足案例要求
    * 功能：控制html文件的內容
    * 獲取頁面標籤(元素)物件：Element
        * document.getElementById("id值"):通過元素的id獲取元素物件

    * 操作Element物件：
        1. 修改屬性值：
            1. 明確獲取的物件是哪一個？
            2. 檢視API文件，找其中有哪些屬性可以設定
        2. 修改標籤體內容：
            * 屬性：innerHTML
            1. 獲取元素物件
            2. 使用innerHTML屬性修改標籤體內容

## 事件簡單學習
    * 功能： 某些元件被執行了某些操作後，觸發某些程式碼的執行。
        * 造句：  xxx被xxx,我就xxx
            * 我方水晶被摧毀後，我就責備對友。
            * 敵方水晶被摧毀後，我就誇獎自己。

    * 如何繫結事件
        1. 直接在html標籤上，指定事件的屬性(操作)，屬性值就是js程式碼
            1. 事件：onclick--- 單擊事件

        2. 通過js獲取元素物件，指定事件屬性，設定一個函式

        * 程式碼：
            <body>
                <img id="light" src="img/off.gif"  οnclick="fun();">
                <img id="light2" src="img/off.gif">
                
                <script>
                    function fun(){
                        alert('我被點了');
                        alert('我又被點了');
                    }
                
                    function fun2(){
                        alert('咋老點我？');
                    }
                
                    //1.獲取light2物件
                    var light2 = document.getElementById("light2");
                    //2.繫結事件
                    light2.onclick = fun2;
                
                
                </script>
            </body>
    
    * 案例1：電燈開關
        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>電燈開關</title>
        
        </head>
        <body>
        
        <img id="light" src="img/off.gif">
        
        <script>
            /*
                分析：
                    1.獲取圖片物件
                    2.繫結單擊事件
                    3.每次點選切換圖片
                        * 規則：
                            * 如果燈是開的 on,切換圖片為 off
                            * 如果燈是關的 off,切換圖片為 on
                        * 使用標記flag來完成
        
             */
        
            //1.獲取圖片物件
            var light = document.getElementById("light");
        
            var flag = false;//代表燈是滅的。 off圖片
        
            //2.繫結單擊事件
            light.onclick = function(){
                if(flag){//判斷如果燈是開的，則滅掉
                    light.src = "img/off.gif";
                    flag = false;
        
                }else{
                    //如果燈是滅的，則開啟
        
                    light.src = "img/on.gif";
                    flag = true;
                }
        
        
            }
            
        </script>
        </body>
        </html>

# BOM:
    1. 概念：Browser Object Model 瀏覽器物件模型
        * 將瀏覽器的各個組成部分封裝成物件。

    2. 組成：
        * Window：視窗物件
        * Navigator：瀏覽器物件
        * Screen：顯示器螢幕物件
        * History：歷史記錄物件
        * Location：位址列物件

    3. Window：視窗物件
        1. 建立
        2. 方法
             1. 與彈出框有關的方法：
                alert()    顯示帶有一段訊息和一個確認按鈕的警告框。
                confirm()    顯示帶有一段訊息以及確認按鈕和取消按鈕的對話方塊。
                    * 如果使用者點選確定按鈕，則方法返回true
                    * 如果使用者點選取消按鈕，則方法返回false
                prompt()    顯示可提示使用者輸入的對話方塊。
                    * 返回值：獲取使用者輸入的值
             2. 與開啟關閉有關的方法：
                close()    關閉瀏覽器視窗。
                    * 誰呼叫我 ，我關誰
                open()    開啟一個新的瀏覽器視窗
                    * 返回新的Window物件
             3. 與定時器有關的方式
                setTimeout()    在指定的毫秒數後呼叫函式或計算表示式。
                    * 引數：
                        1. js程式碼或者方法物件
                        2. 毫秒值
                    * 返回值：唯一標識，用於取消定時器
                clearTimeout()    取消由 setTimeout() 方法設定的 timeout。
    
                setInterval()    按照指定的週期（以毫秒計）來呼叫函式或計算表示式。
                clearInterval()    取消由 setInterval() 設定的 timeout。
    
        3. 屬性：
            1. 獲取其他BOM物件：
                history
                location
                Navigator
                Screen:
            2. 獲取DOM物件
                document
        4. 特點
            * Window物件不需要建立可以直接使用 window使用。 window.方法名();
            * window引用可以省略。  方法名();


    4. Location：位址列物件
        1. 建立(獲取)：
            1. window.location
            2. location

        2. 方法：
            * reload()    重新載入當前文件。重新整理
        3. 屬性
            * href    設定或返回完整的 URL。


    5. History：歷史記錄物件
        1. 建立(獲取)：
            1. window.history
            2. history

        2. 方法：
            * back()    載入 history 列表中的前一個 URL。
            * forward()    載入 history 列表中的下一個 URL。
            * go(引數)    載入 history 列表中的某個具體頁面。
                * 引數：
                    * 正數：前進幾個歷史記錄
                    * 負數：後退幾個歷史記錄
        3. 屬性：
            * length    返回當前視窗歷史列表中的 URL 數量。


## DOM：
    * 概念： Document Object Model 文件物件模型
        * 將標記語言文件的各個組成部分，封裝為物件。可以使用這些物件，對標記語言文件進行CRUD的動態操作

    * W3C DOM 標準被分為 3 個不同的部分：

        * 核心 DOM - 針對任何結構化文件的標準模型
            * Document：文件物件
            * Element：元素物件
            * Attribute：屬性物件
            * Text：文字物件
            * Comment:註釋物件

            * Node：節點物件，其他5個的父物件
        * XML DOM - 針對 XML 文件的標準模型
        * HTML DOM - 針對 HTML 文件的標準模型

    * 核心DOM模型：
        * Document：文件物件
            1. 建立(獲取)：在html dom模型中可以使用window物件來獲取
                1. window.document
                2. document
            2. 方法：
                1. 獲取Element物件：
                    1. getElementById()    ： 根據id屬性值獲取元素物件。id屬性值一般唯一
                    2. getElementsByTagName()：根據元素名稱獲取元素物件們。返回值是一個陣列
                    3. getElementsByClassName():根據Class屬性值獲取元素物件們。返回值是一個陣列
                    4. getElementsByName(): 根據name屬性值獲取元素物件們。返回值是一個陣列
                2. 建立其他DOM物件：
                    createAttribute(name)
                    createComment()
                    createElement()
                    createTextNode()
            3. 屬性
        * Element：元素物件
            1. 獲取/建立：通過document來獲取和建立
            2. 方法：
                1. removeAttribute()：刪除屬性
                2. setAttribute()：設定屬性
        * Node：節點物件，其他5個的父物件
            * 特點：所有dom物件都可以被認為是一個節點
            * 方法：
                * CRUD dom樹：
                    * appendChild()：向節點的子節點列表的結尾新增新的子節點。
                    * removeChild()    ：刪除（並返回）當前節點的指定子節點。
                    * replaceChild()：用新節點替換一個子節點。
            * 屬性：
                * parentNode 返回節點的父節點。


    * HTML DOM
        1. 標籤體的設定和獲取：innerHTML
        2. 使用html元素物件的屬性
        3. 控制元素樣式
            1. 使用元素的style屬性來設定
                如：
                     //修改樣式方式1
                    div1.style.border = "1px solid red";
                    div1.style.width = "200px";
                    //font-size--> fontSize
                    div1.style.fontSize = "20px";
            2. 提前定義好類選擇器的樣式，通過元素的className屬性來設定其class屬性值。


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


    * 常見的事件：
        1. 點選事件：
            1. onclick：單擊事件
            2. ondblclick：雙擊事件
        2. 焦點事件
            1. onblur：失去焦點
            2. onfocus:元素獲得焦點。

        3. 載入事件：
            1. onload：一張頁面或一幅影像完成載入。

        4. 滑鼠事件：
            1. onmousedown    滑鼠按鈕被按下。
            2. onmouseup    滑鼠按鍵被鬆開。
            3. onmousemove    滑鼠被移動。
            4. onmouseover    滑鼠移到某元素之上。
            5. onmouseout    滑鼠從某元素移開。
            
            
        5. 鍵盤事件：
            1. onkeydown    某個鍵盤按鍵被按下。    
            2. onkeyup        某個鍵盤按鍵被鬆開。
            3. onkeypress    某個鍵盤按鍵被按下並鬆開。

        6. 選擇和改變
            1. onchange    域的內容被改變。
            2. onselect    文字被選中。

        7. 表單事件：
            1. onsubmit    確認按鈕被點選。
            2. onreset    重置按鈕被點選。

相關文章