知識點-ECMASCRIPT

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

知識點-BOM

• 概念

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

• 作用

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

知識點-DOM

• 什么是DOM?

  Document Object Model(文檔對象模型)

• 詳解DOM

  • 什么是文檔

    HTML文件就是一個文檔

知識點-什么是API

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

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

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

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

通過ID獲取元素

• 語法

  document.getElementById('元素id');

• 總結

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

通過標簽名獲取元素

• 語法

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

• 總結

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

通過選擇器獲取單個元素

• 語法

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

• 總結

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

通過選擇器獲取多個元素

• 語法

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

• 總結

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

課堂練習

什么是事件?

事件組成的三要素

• 事件源

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

• 事件類型

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

• 處理程序

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

事件語法

事件類型

• onclick —> 用戶的點擊事件

this關鍵字介紹

• 在普通函數中的this

  this 指向 window

• 在構造函數中的this

  this 指向的是 創建的對象

• 事件中的this

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

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

課堂練習

href屬性

阻止a標簽跳轉方式

innerText

• innerText獲取內容

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

• innerText設置內容

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

innerHTML

• innerHTML獲取內容

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

• innerHTML設置內容

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

innerText 和 innerHTML的區別

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

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

• 通過className設置一個類名
• 通過className設置多個類名
• 通過className移除類名

• 通過className設置一個類名
• 通過className設置多個類名
• 通過className移除類名