webAPI

00-復習

1. 內置對象中的方法

01-JavaScript組成

1. 知識點-ECMASCRIPT

   • 重點回顧
     • 存儲容器
       • 變量
       • 數組
       • 對象
     • 邏輯語法
       • 分支語句
       • 循環語句
       • switch語句

2. 知識點-BOM

   • 概念

     Browser Object Model (瀏覽器器對象模型)  操作瀏覽器將瀏覽器看做是一個對象.
     

   • 作用

     通過js操作瀏覽器中相關操作
     

3. 知識點-DOM

   • 什么是DOM?

     Document Object Model(文檔對象模型)
     

   • 詳解DOM

     • 什么是文檔

       HTML文件就是一個文檔
       

 - 什么是文檔對象```js將整個網頁封裝成一個對象,這個對象叫文檔對象(document)```- 為什么要學DOM?```js在網頁中常常涉及到需要用戶操作網頁,比如點擊, 鼠標進入, 鼠標離開等,ECMASCRIPT是無法實現,只能通過DOM操作實現目的: 通過js操作網頁.```- **JS操作網頁的原理**- DOM樹操作```js瀏覽器在加載html文件時，會把文檔、文檔中的標簽、屬性、文本、注釋轉換成對象，然后按照標簽的關系（父子、兄弟、祖孫）以樹狀結構存儲到內存中。```

   - 元素```js元素特指: HTML標簽```- 節點```jsHTML文檔中的所有元素的總稱稱為節點,每一個標簽,每一個文本,每一個符號(回車,空格)都稱為一個節點```

4. 知識點-什么是API

   • API（Application Programming Interface）應用程序編程接口（暴露出來的工具）。

     api: 通俗理解就是一個方法或屬性
     

   • 瀏覽器平臺對外公開的提供操作瀏覽器和網頁的接口（BOM、DOM）

     webAPI: 網頁中提供的一些方法,用來操作網頁的.webAPI階段重點: 記住各種方法用來操作網頁 
     

02-DOM學習路徑

1. 找對象(獲取元素)
2. 設置元素屬性
3. 設置元素樣式
4. 動態創建元素和刪除元素
5. 事件的觸發響應: 事件源,事件,事件驅動

03-獲取頁面元素[重點]

1. 通過ID獲取元素

   • 語法

     document.getElementById('元素id');
     

   • 總結

     1. document.getElementById得到就是一個html標簽對象
     2. document.getElementById得到的結果只有一個對象
     3. 不推薦標簽的id值重復

2. 通過標簽名獲取元素

   • 語法

     document.getElementsByTagName('html標簽名字');注意:
     標簽的名字, 不是html標簽
     

   • 總結

     1. 返回的結果是一個偽數組對象
     2. 這個數組對象中保存的就是每一個具體的html標簽對象
     3. 如果要獲取每一個html標簽對象,可以遍歷這個數組得到

3. 通過選擇器獲取單個元素

   • 語法

     document.querySelector('css選擇器');  備注: 所有的css選擇器都可以用
     

   • 總結

     1. document.querySelector()方法返回的結果只有一個對象
     2. 返回的這個對象還是滿足條件的第一個

4. 通過選擇器獲取多個元素

   • 語法

     document.querySelectorAll('CSS選擇器')備注: 所有的css選擇器都可以用
     

   • 總結

     1. document.querySelectorAll() 得到的結果偽數組對象
     2. document.querySelectorAll() 返回值數組中存放的就是每一個具體的html標簽對象
     3. 可以通過循環遍歷的方式獲取具體的每一個html標簽對象

5. 課堂練習

   1. 在如下代碼結構中將第一個列表中所有的li標簽輸出到控制臺中
   2. 在如下代碼結構中將第二個列表中第3個li標簽輸出到控制臺中
   

04-事件

1. 什么是事件?

   事件 : 其實就是用戶在網頁中的一個具體的動作為什么要學事件: 在網頁中有些效果是需要用戶執行完動作(事件)后才有對應的效果的
   

2. 事件組成的三要素

   • 事件源

     事件源: 源頭,給誰加的事件.      ----->  具體的DOM對象(html標簽對象)
     

   • 事件類型

     事件類型:  用戶動作是什么
     

   • 處理程序

     處理程序:  用戶執行完動作后要干什么?    -----> 處理程序是一個函數
     

3. 事件語法

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

4. 事件類型

   • onclick —> 用戶的點擊事件

5. this關鍵字介紹

   • 在普通函數中的this

     this 指向 window
     

   • 在構造函數中的this

     this 指向的是 創建的對象
     

   • 事件中的this

     在事件中的 this 指向誰?  指向事件源
     

6. 事件處理程序什么時候執行

   當事件被用戶觸發后,處理程序中的代碼才會執行
   

7. 課堂練習

   1. 給id名為'one'的標簽注冊一個點擊事件, 點擊后彈出 '你好'
   2. 給頁面中的每一個li標簽注冊點擊事件, 單擊后彈出當前li的索引值(第幾個就彈出幾)<ul><li>我是第一個li</li> <li>我是第二個li</li> <li>我是第三個li</li> </ul>
   

05-操作圖片標簽中的屬性

1. src屬性
2. alt屬性
3. 課堂案例-切換圖片

06-操作a標簽的屬性

1. href屬性

   獲取a標簽中的網址信息:
   DOM.href
   

2. 阻止a標簽跳轉方式

   在 a 標簽的點擊事件中 設置  return  false;a.onclick = function() {//阻止a 標簽跳轉  return false;
   }
   

07-標簽設置/獲取文字

1. innerText

   • innerText獲取內容

     獲取DOM對象(標簽對象)中的文字
     DOM.innerText
     

   • innerText設置內容

     給標簽賦值:DOM.innerText = 值;
     

2. innerHTML

   • innerHTML獲取內容

     獲取DOM對象(標簽對象)中的文字
     語法: DOM.innerHTML
     

   • innerHTML設置內容

     給標簽賦值:DOM.innerHTML  =  值;
     

3. innerText 和 innerHTML的區別

   • innerHTML 在獲取標簽中文字信息的時候,包括了回車符,html標簽等內容
   • innerText在獲取標簽中文字信息的時候,只獲取文字,不包括其他內容
   • innerHTML給標簽賦值的時候,可以將標簽渲染成對應的HTML標簽
   • innerText給標簽賦值的時候,不能將標簽渲染成HTMl標簽的

4. 課堂練習-點擊標簽切換文字

08-操作標簽樣式

1. 通過className方式操作
   • 通過className設置一個類名
   • 通過className設置多個類名
   • 通過className移除類名
2. 課堂案例-設置標簽動畫樣式

HTML的區別**

• innerHTML 在獲取標簽中文字信息的時候,包括了回車符,html標簽等內容
• innerText在獲取標簽中文字信息的時候,只獲取文字,不包括其他內容
• innerHTML給標簽賦值的時候,可以將標簽渲染成對應的HTML標簽
• innerText給標簽賦值的時候,不能將標簽渲染成HTMl標簽的

4. 課堂練習-點擊標簽切換文字

08-操作標簽樣式

1. 通過className方式操作
   • 通過className設置一個類名
   • 通過className設置多個類名
   • 通過className移除類名
2. 課堂案例-設置標簽動畫樣式