一.API的概念
API(Application Programming Interface,應用程序編程接口)是一些預先定義的函數,目的是提供應用程序與開發人員基於某軟件或硬件得以訪問一組例程的能力,而又無需訪問源碼,無需理解其內部工作機制細節,只需直接調用使用即可。
二. Web API的概念
Web API 是瀏覽器提供的一套操作瀏覽器功能和頁面元素的 API ( BOM 和 DOM )。
對於瀏覽器講解常用的 API , 主要針對瀏覽器做交互效果。比如我們想要瀏覽器彈出一個警示框, 直接使用 alert(‘彈出’)等等…
API接口文檔:點擊跳轉
三. 什麼是DOM
文檔對象模型(Document Object Model,簡稱DOM)
==DOM樹 又稱爲文檔樹模型,==把文檔映射成樹形結構,通過節點對象對其處理,處理的結果可以加入到當前的頁面。
- 文檔:一個頁面就是一個文檔,DOM中使用document表示
- 節點:網頁中的所有內容,在文檔樹中都是節點(標籤、屬性、文本、註釋等),使用node表示
- 標籤節點:網頁中的所有標籤,通常稱爲元素節點,又簡稱爲“元素”,使用element表示。
1.根據ID獲取
語法:document.getElementById(id)
作用:根據ID獲取元素對象
參數:id值,區分大小寫的字符串
返回值:元素對象 或 null
2. 根據標籤名獲取元素
語法:document.getElementsByTagName(‘標籤名’) 或者 element.getElementsByTagName(‘標籤名’)
作用:根據標籤名獲取元素對象
參數:標籤名
返回值:元素對象集合(僞數組,數組元素是元素對象)
注意:getElementsByTagName()獲取到是動態集合,即:當頁面增加了標籤,這個集合中也就增加了元素。
3.H5新增獲取元素方式(IE9以上適用)
1.getElementsByClassName 根據類名獲得某些元素集合
2. querySelector 返回指定選擇器的第一個元素對象 切記 裏面的選擇器需要加符號 .box #nav
3. querySelectorAll()返回指定選擇器的所有元素對象集合
4.獲取body or html元素
四.事件三要素☆
- 事件源(誰):觸發事件的元素
- 事件類型(什麼事件): 例如 click 點擊事件
- 事件處理程序(做啥):事件觸發後要執行的代碼(函數形式),事件處理函數
常見的鼠標事件
5 . 改變元素內容(獲取或設置)
innerText和innerHTML的區別
- 獲取內容時的區別:
innerText會去除空格和換行,而innerHTML會保留空格和換行
- 設置內容時的區別:
innerText不會識別html,而innerHTML會識別
6 . 樣式屬性操作
我們可以通過 JS 修改元素的大小、顏色、位置等樣式。
常用方式
五.總結
此部分爲作業部分:
點擊前往每日作業