webAPI的基礎理解與運用事件表單屬性（七）

webAPI

    能夠使用js實現操作頁面中的標籤【通過js操作標籤的樣式】

組成

1. DOM ： Document Object Model

   在js中，將整個網頁抽象成了一個對象，可以通過js操作網頁。 —》 document對象

2. BOM ： Browser Object Model

   將瀏覽器抽象成一個對象， -----》 window對象

DOM

    將整個網頁抽象成了一個對象   ----》 document對象


    1. 通過js操作 html 標籤

        ☞ 通過標籤的ID獲取html標籤

            document.getElementById('標籤的id');

            總結：
                1. 該方法有返回值

                2. 該方法返回的就是標籤對應的對象

                3. 只能獲取滿足條件的一個結果


        ☞ 通過標籤的名字獲取標籤

             document.getElementsByTagName('標籤的名字');

             總結：
                 1. 該方法有返回值

                 2. 該方法返回的是一個僞數組，每一個標籤對應對象

        ☞ 通過選擇器獲取標籤

             注意： 選擇器就是css中的選擇器


             document.querySelector('CSS選擇器');

             總結：
                1. 有返回值

                2. 只返回滿足條件的一個結果



            document.querySelectorAll('CSS選擇器');

            總結：
                 1. 有返回值

                 2. 返回的結果是一個僞數組，放的就是滿足條件的標籤對象

事件

    語法：

        事件源.事件類型 = function() {  運行程序(處理程序)  }


     三要素：
         1. 事件源    ----》 事件的載體

         2. 事件類型   ----》 用戶具體的動作

         3. 運行程序   ----》 事件要幹什麼


    事件類型：
        1. 用戶的單擊事件：  onclick


    總結：
         1. 在事件中的 this 就指向事件源

通過js動態給標籤添加樣式

    語法：

        // 設置類樣式
         DOM對象（頁面中獲取的標籤）.className = 值;

        // 取消類樣式
         DOM對象.className = '';

         //給標籤同時添加多個類樣式
         DOM對象.className = '值 值';

表單屬性

    1. 如何獲取輸入框中的值

        DOM對象.value    --- > 獲取輸入框中的值

    2. 如何給輸入框設置值

        DOM對象.value = 值; -----> 給表單控件設置值

    3. 如何讓按鈕默認不能點擊

         ☞ 可以給按鈕設置  disabled 屬性

    4. 獲取按鈕是否可以被點擊

         DOM對象.disabled 得到的結果是true  ----》 當前按鈕不能被點擊

         DOM對象.disabled 得到的結果是false  ----》當前按鈕可以點擊

    5. js操作複選框（單選框）

         DOM對象.checked 得到的結果是 true  ----> 當前複選框被選中了
         DOM對象.checked 得到的結果是 false  ----> 當前複選框沒有被選中


         DOM對象.checked = true   ---> 設置選中效果
         DOM對象.checked = false  ---> 設置不選中