webAPI-DOM
目錄
- JavaScript與ECMAScript+
- DOM
- 時間對象屬性與方法的集合體
- 定時器函數
- 案例
1.1-JavaScript與ECMAScript
目标：知道 ECMAScript 與 JavaScript 的關系，Web APIs 是浏覽器擴充的功能
- ECMAScript 是一套文法标準
- 簡稱ES
- 我們之前學的文法其實就是 ECMAScript 裡的文法
- 變量、資料類型、運算等規則都是 ECMAScript 規定的
- JavaScript 是什麼？
- 遵守 ECMAScript 規則的一套程式設計語言
- 嚴格來講，ECMAScript 配合浏覽器提供的 Web APIs 才稱之為 JavaScript
- Web APIs 是什麼？
- 浏覽器提供的一套操作浏覽器、頁面内容的功能（主要是一些對象和方法 )
1.2-JavaScript和node.js
二、DOM
2.1 DOM概念
- 什麼是DOM
- 把HTML相關标簽當作對象處理
- DOM樹
- 把HTML頁面當作頁面，叫做DOM樹脂
- DOM節點
- HTML頁面每一個标簽叫做DOM節點、元素對象；element
- document
- DOM樹 整個文檔 對象（屬性和方法結合體） { } [ ] 萬物皆對象：标簽
2.1.1 DOM是什麼
目标：能說出DOM是什麼
DOM是什麼？
DOM是浏覽器提供的一套專門用來操作網頁内容的功能
- DOM的核心思想
- 把網頁内容當做對象來處理
- DOM作用
- 開發網頁内容特效和實作使用者互動
- DOM全稱
- Document Object Model（文檔對象模型）
2.1.2 DOM樹
目标：能說出DOM樹是什麼
- DOM樹是什麼
- 将 HTML 文檔以樹狀結構直覺的表現出來，我們稱之為文檔樹或 DOM 樹
- 描述網頁内容關系的名詞
- 作用：文檔樹直覺的展現了标簽與标簽之間的關系
2.1.3 DOM節點
目标：能說出DOM節點的類型
- DOM節點
- DOM樹裡每一個内容都稱之為節點
- 節點類型
- 元素節點
- 所有的标簽 比如 body、 div
- html 是根節點
- 屬性節點
- 所有的屬性 比如 href
- 文本節點
- 所有的文本
- 其他
- 元素節點
2.1.4 document
目标：能說出document對象的作用
- document
- 是 DOM 裡提供的一個對象
-
是以它提供的屬性和方法都是用來通路和操作網頁内容的
例：document.write()
- 代表浏覽器顯示網頁内容的區域
- 網頁所有内容都在document裡面
- document 是學習 DOM 的核心
webAPI-DOMwebAPI-DOM
2.1 DOM概念總結
目标：知道 DOM 相關的概念，建立對 DOM 的初步認識
- DOM是什麼？
- 文檔對象模型
- DOM是浏覽器提供的一套專門用來操作網頁内容的功能
- DOM 樹是什麼？
- 将 HTML 文檔以樹狀結構直覺的表現出來，我們稱之為文檔樹或 DOM 樹
- 作用：文檔樹直覺的展現了标簽與标簽之間的關系
- DOM 節點是什麼？
- DOM樹裡每一個内容都稱之為節點
- 常見的DOM 節點類型： 元素節點、屬性節點、文本節點等
- document 是什麼？
- 是 DOM 裡提供的一個對象，用來通路和操作網頁内容的
2.2 查找元素節點
目标：能查找元素DOM節點
- HTML 中任意标簽都是**【元素類型節點】**
- 是以： 查找元素節點就是選擇頁面中标簽元素
- 根據 id 來查找dom元素節點
文法：document.getElementById(‘标簽的id’);
- 根據id查找标簽
- 傳入的id是字元串，記得加引号，直接寫id名即可，不需要加 #
- 傳回一個比對到 ID 的 DOM Element 對象（所有節點都是對象）
- 找不到會得到null
- 可以通過對象裡面的 nodeType 屬性來辨別節點類型
// 方法：
// 翻譯： get擷取得到 Element元素 by通過 id：标簽唯一辨別
// 作用：擷取元素對象
// 參數：字元串、放入找哪個标簽ID值，注意不要選擇器，沒有#
// 傳回：
document.getElementById();
- 查找html和body元素節點
// html:第二的單詞首字母大寫，不常用
// console.log(document.documentElement)
// body
// console.log(document.body)
// webAPI：推薦放在body後面
2.3 操作元素節點
目标：能夠操作元素節點更改元素的屬性和文本内容
提問：操作标簽我們都可以做哪些修改？
标簽的屬性 比如更換圖檔修改 img的src 屬性
标簽的文本内容
-
直接修改元素的屬性
文法： 對象. 屬性 = 值
舉例說明： //1.擷取DOM節點：對象 let img = document.getElementById("pic") // 2.操作DOM節點：屬性和方法結合體 //獲img.src=取屬性？ src alt width 都是DOM節點自帶屬性名 // img.src imd.id 點文法擷取 //設定屬性 ? img.src = "./images/b03.jpg"; img.alt = "啊哈哈哈哈哈"; img.width = "700"; -
通過 setAttribute 方法修改
文法：對象.setAttribute(‘屬性’，‘值’)
/* 設定屬性方法：DOM節點上帶方法 單詞：set 設定 Attribute 屬性 參數： 第一：設定哪個屬性字元串， 第二：設定的屬性值； */ img.setAttribute("src", "./images/b07.jpg") //目前：兩個方式功能一樣，推薦使用簡單 對象.屬性名 -
修改元素的樣式
文法：對象.style.樣式屬性 = 值
webAPI-DOMwebAPI-DOM
案例1-随機變化背景案例：//1.擷取寬度 let div = document.getElementById("box") /* 2.擷取 剛才為什麼可以 ? dom : img有這樣設定 width = 500 現在是div: style = "width:30epx;height: 300px;" 注意: 具體某個屈性名如何是連字元, 轉換為駝峰命名規則隻能擷取行内樣式:*/ console.log(div.width, div.style.width, div.style.backgroundColor) div.style.width = '600px'; //css 屬性的 -連接配接符與js的減運算符 div.style.backgroundColor = '#333';<style> body { /* 不需要設定寬度，設定背景圖有效！ */ background: url(../代碼/images/b01.jpg) no-repeat; } </style> </head> <body> <script> //需求：重新整理頁面，背景圖随機換一個 // 步驟: 1.擷取dom節點 let body = document.body; //随機：1-9随機的一個整數 let i = Math.floor(Math.random() * 9) + 1; //2.設定背景圖檔： body.style.background = `url(../代碼/images/b0${i}.jpg) no-repeat`; </script> </body>
2.3.2 操作元素文本
目标：能夠修改元素的文本更換内容
- document.write
- 隻能将文本内容追加到
- 文本中包含的标簽會被解析
//永遠都隻是追加操作，且隻能位置</body>前 document.write( 'Hello world ! ' ); document.write( ' <h3>你好，世界!</h3>')
- innerText 屬性
- 将文本内容添加/更新到任意标簽位置
- 文本中包含的标簽不會被解析
l /innerText将文本内容添加/更新到任意标簽位置 let info = document.getElementById( ' info ') //intro.innerText =‘嗨~我叫李雷!’ info.innerText = '<h4>嗨~我叫李雷!</h4>'//問 let ul = document.getElementById("demo") ul.innerHTML = "<h2>哈哈大大</h2>" console.log(ul.innerText, ul.innerHTML)
操作元素小結
- 操作元素屬性有哪些方式？
- 點文法操作屬性（推薦） 對象.屬性
- setAttribute(‘屬性’, ‘值’)
- 對象.style.樣式名
- 操作元素文本有哪些方式？
- document.write()
- innterText 不解析标簽
- innerHTML 解析标簽
三、時間對象
目标：掌握時間對象，可以讓網頁顯示時間
- 時間對象：用來表示時間的對象
- 作用：可以得到目前系統時間
- 學習路徑：
- 執行個體化
- 時間對象方法
- 時間戳
3.1 執行個體化
- 在代碼中發現了 new 關鍵字時，一般将這個操作稱為執行個體化
- 建立一個時間對象并擷取時間
- 獲得目前時間
let date = new Date( )
- 獲得指定時間
let date = new Date(‘1949-10-01’)
- 獲得目前時間
3.2 時間對象方法
目标：能夠使用時間對象中的方法寫出常見日期
- 因為時間對象傳回的資料我們不能直接使用，是以需要轉換為實際開發中常用的格式
方法 作用 說明 getFullYear() 獲得年份 擷取四位年份 getMonth() 獲得月份 取值為 0 ~ 11 getDate() 擷取月份中的每一天 不同月份取值也不相同 getDay() 擷取星期 取值為 0 ~ 6 getHours() 擷取小時 取值為 0 ~ 23 getMinutes() 擷取分鐘 取值為 0 ~ 59 getSeconds() 擷取秒 取值為 0 ~ 59 案例2-頁面顯示時間案例：
<div id="box"></div>
<script>
// 需求：頁面某個盒子 顯示系統時間
// 個位數，0-9 雙位數
function fn(num) {
if (num < 10) {
num = '0' + num
}
return num;
}
//步驟
//1.得到時間對象
let time = new Date();
//2.對象上方法執行，擷取對于資料
let Y = time.getFullYear();
let M = time.getMonth() + 1;
M = fn(M);
let D = time.getDate();
D = fn(D);
let h = time.getHours();
h = fn(h);
let a = time.getMinutes()
a = fn(a)
// 秒
let t = time.getSeconds()
t = fn(t)
let div = document.getElementById("box")
document.write(`${Y}-${M}-${D}-${h}:${a}:${t}`)
/* 重點：
1.學會時間對象方法使用
2.練習ES6模闆字元串
3.函數封裝:
什麼時候用 ? 發現某個代碼邏輯在上下文某些地方重複出現;
關注： 是否需要淩置形參 ? 調用的時侯我是否需要傳入實參
是否需要設定傳回值 ? 調用的時候，是否需要傳回一個資料! */
</script>
3.3 時間戳
目标：能夠獲得目前時間戳
- 什麼是時間戳
- 是指1970年01月01日00時00分00秒起至現在的毫秒數，它是一種特殊的計量時間的方式
- 三種方式擷取時間：
-
- 使用 Date().now()
- console.log(Date.now())
- 無需執行個體化
- 但是隻能得到目前的時間戳， 而前面兩種可以傳回指定時間的時間戳
-
案例：擷取時間戳
<div id="time"></div>
<script>
let fn = function () {
let time1 = new Date()
let time2 = new Date("2021-11-11 0:0:0");
//2.得到時間戳
let numb1 = +time1
let numb2 = +time2
// 3.時間戳:s
let cha = (numb2 - numb1) / 1000;
//天
let day = Math.floor(cha / (24 * 60 * 60));
//時:
let hours = Math.floor(cha / 3600) % 24;
//分
let m = Math.floor(cha / 60) % 60;
//秒：
let s = Math.floor(cha) % 60;
//如何設定顯示在頁面當中
let div = document.getElementById('time');
div.innerText = `我是秒男：${day}天-${hours}時-${m}分-${s}秒-馬上秒射`;
}
fn();
setInterval(fn, 1000);
</script>
3.時間對象總結
目标：掌握時間對象，可以讓網頁顯示時間
- 執行個體化時間對象
- new Date()
- 時間對象方法
- 時間對象裡面的方法轉換實際所用
- 時間戳
- date.getTime()
- +new Date()
- Date.now()
- 重點記住 +new Date() 因為可以傳回目前時間戳或者指定的時間戳
四、定時器函數
目标：能夠使用定時器函數建立定時任務
- 學習路徑：
- 定時器函數介紹
- 定時器函數基本使用
4.1 定時器函數介紹
目标：能夠說出定時器函數在開發中的使用場景
- 網頁中經常會需要一種功能：每隔一段時間需要自動執行一段代碼
- 例如：網頁中的倒計時
-
要實作這種需求，需要定時器函數
[外鍊圖檔轉存失敗,源站可能有防盜鍊機制,建議将圖檔儲存下來直接上傳(img-3nW16UmX-1618214020606)(C:\Users\27222\AppData\Roaming\Typora\typora-user-images\image-20210403164939683.png)]
4.2 定時器函數使用
目标：能夠使用定時器函數重複執行代碼
- 開啟定時器
setInterval(函數，間隔時間）
- 作用：每隔一段時間調用這個函數
- 間隔時間機關是毫秒
案例：畢業倒計時
- 關閉定時器
let 變量名 = setInterval(函數，間隔時間)
clearInterval(變量名)
一般不會剛建立就停止，而是滿足一定條件再停止
案例4.1:倒計時效果
// 需求：1.console 輸出 123456
let index = 0
let fn = function () {
index++
console.log(index)
}
setInterval(fn,1000)
//2.1-9當index數值10的時候，回到0，列印1
let index = 0
let fn = function () {
index++;
if (index == 10) {
index = 1;
}
console.log(index)
}
setInterval(fn, 500)
案例4.2：網頁輪播圖效果
<img src="../代碼/images/desktop_1.jpg" id="pic" width="50%">
let index = 0;
let fn = function () {
index++;
//1.index： 1-9
if (index == 10) {
index = 1;
}
//2.設定圖檔，找到圖檔，過去dom節點
let img = document.getElementById('pic')
//3.設定圖檔位址
img.src = `../代碼/images/desktop_${index}.jpg`
}
fn();
setInterval(fn, 2000)
四、定時器函數小結
- 定時器函數有什麼作用？
- 可以根據時間自動重複執行某些代碼
- 定時器函數如何開啟？
- setinterval(函數名, 時間)
- 定時器函數如何關閉？
let 變量名 = setInterval(函數，間隔時間) clearInterval(變量名)
案例4.3-定時器關閉
// 需求2:5s後重試
let index = 5
let timer;
let fn = function () {
index--;
//1.擷取DOM
let btn = document.getElementById("btn")
// 2.設定文本字
btn.innerText = `${index}s後重試`
//3.判斷當index 不能繼續往下走,停止定時器;
if (index == 1) {
clearInterval(timer)
}
}
timer = setInterval(fn, 1000);