我的WebAPI學習（一）------ DOM元素的擷取以及事件的基本用法

前言：這裡，DOM樹的概念就不多贅述，快速入門，幹！

文章目錄

• ​​DOM元素擷取​​

• ​​通過ID擷取​​
• ​​根據标簽名擷取​​
• ​​其他一些常用方法(HTML5)​​
• ​​擷取特殊元素（body與html）​​

• ​​事件​​

• ​​事件三要素​​
• ​​常見的滑鼠事件（網圖搜集）​​

DOM元素擷取

當我們想要操作頁面上的某部分(顯示/隐藏，動畫)，需要先擷取到該部分對應的元素，再對其進行操作，這時候如何定位就顯得很至關重要了

通過ID擷取

使用方法：document.getElementById(id)

作用：根據ID擷取元素對象 參數：id值，區分大小寫的字元串

傳回值：元素對象 或 null

根據标簽名擷取

使用方法：document.getElementsByTagName(‘标簽名’)

或element.getElementsByTagName(‘标簽名’)

作用：根據标簽名擷取元素對象 參數：标簽名 傳回值：元素對象集合（僞數組，數組元素是元素對象）

🌂：因為我們獲得的是一個對象的集合，是以如果我們想要裡面的某個元素就需要周遊

其他一些常用方法(HTML5)

​

​document.getElementsByClassName​

​​可以根據類名擷取元素對象的集合

​​

​document.querySelector​

​​通過選擇器擷取第一個比對的元素對象

​​

​document.querySelectorAll​

​通過選擇器擷取所有比對的元素對象

最簡單的方式F12複制選擇器就好哈哈哈

擷取特殊元素（body與html）

​

​document.body​

​​擷取body元素

​​

​document.documentElement​

​擷取html元素

事件

關于什麼是事件就不多解釋，網上有一堆，而且本系列主要也是給自己複習用，不講究太多了

事件三要素

• 事件源（什麼東西）：觸發事件的元素
• 事件類型（什麼事件）： 例如 click 點選事件

• 事件處理程式（要去做什麼）：事件觸發後要執行的代碼(函數形式)，事件處理函數

  下面通過一個簡單例子說明：

<script>
// 點選一個按鈕，彈出對話框
// 1. 事件是有三部分組成  事件源  事件類型  事件處理程式   我們也稱為事件三要素
//(1) 事件源 事件被觸發的對象   誰  按鈕
        var bt = document.getElementById('xxx');
//(2) 事件類型  
//(3) 事件處理程式  通過一個函數指派的方式 完成
        bt.onclick = function() {
            console.log('JavaScript真好');
        }
</script>      

常見的滑鼠事件（網圖搜集）