Part2 模塊3 Web APIs 網(wǎng)頁應用編程

時間：2023-09-07 07:00:01 | 來源：網(wǎng)站運營

時間：2023-09-07 07:00:01 來源：網(wǎng)站運營

Part2 模塊3 Web APIs 網(wǎng)頁應用編程：

DOM

Web API簡介

是一些預先定義的函數(shù)，目的是訪問一組例程的能力，無需訪問源碼，或理解內(nèi)部工作機制細節(jié)。

API的使用方法（console.log("abc")）

BOM 瀏覽器對象模型

• 一套操作瀏覽器功能的API
• 通過BOM可以操作瀏覽器窗框，比如彈窗、控制瀏覽器跳轉(zhuǎn)、獲取分辨率。

DOM 文檔對象模型

• 一套操作頁面元素的API
• DOM可以把HTML看做是文檔樹，通過DOM提供的API可以對樹上的節(jié)點進行操作。

DOM簡介

DOM樹

• DOM又稱為文檔樹模型
• - 文檔：一個網(wǎng)頁
• - 節(jié)點：網(wǎng)頁中的所有內(nèi)容都是節(jié)點
• - 元素：網(wǎng)頁中的標簽
• - 屬性：標簽屬性

DOM經(jīng)常進行的操作

• 獲取元素
• 對元素進行操作（設置屬性或調(diào)用方法）
• 動態(tài)創(chuàng)建元素
• 事件（什么時機做相應的操作）

根據(jù)id獲取元素

• 方法：調(diào)用 document 對象的 getElementById 方法。
• 參數(shù)：字符串類型的 id 的屬性值。
• 返回值：對應 id 名的元素對象。
• 注意1：由于id具有唯一性，部分瀏覽器直接支持使用 id 訪問元素，不推薦使用
• 注意2：代碼執(zhí)行順序，如果js在html結(jié)構(gòu)前，會導致結(jié)構(gòu)未加載。

根據(jù)標簽名獲取元素

• 方法：調(diào)用 document 對象的 getElementsByTagName 方法。
• 參數(shù)：字符串類型的標簽名。
• 返回值：同名的元素對象組成的數(shù)組。
• 注意1：操作數(shù)據(jù)時需要按照操作數(shù)組的方法進行。
• 注意2：getElementsByTagName 方法內(nèi)部獲取的元素是動態(tài)增加的。

元素對象內(nèi)部獲取元素

var box1 = document.getElementById("box1");
var box1p = box1.getElementsByTagName("p")

根據(jù) name 屬性獲取元素

調(diào)用 document 對象的 getElementsByName 方法。

（不建議使用）

===

根據(jù)類名獲取元素

調(diào)用 document 對象的 getElementsByClassName 方法。

===

根據(jù)選擇器獲取元素

var para1 = document.querySelector("#para .para")===

總結(jié)：

//掌握沒有兼容document.getElementById();document.getElementsByTagName();// 了解document.getElementsByName();document.getElementsByClassName();document.querySelector();document.querySelectorAll();============================

DOM 事件基本應用（dom事件用法）

事件：

• 觸發(fā)--響應機制
• 三要素

1. 給誰綁定事件
2. 綁定什么類型的事件
3. 事件發(fā)生后執(zhí)行什么內(nèi)容，寫在函數(shù)內(nèi)部

常用事件監(jiān)聽方法：

• 1.綁定HTML元素屬性
• 2.綁定DOM對象屬性

// 常用鼠標事件類型.onclick //鼠標左鍵單擊觸發(fā).ondblclick //鼠標左鍵雙擊觸發(fā).onmousedown //鼠標按鍵按下觸發(fā).onmouseup //鼠標按鍵放開時觸發(fā).onmouseover //鼠標在元素上移動觸發(fā).onmousemove //鼠標移動到元素上觸發(fā).onmouseout //鼠標移除元素邊界觸發(fā)===

非表單元素屬性操作

• 例如：herf、title、id、src等。
• 調(diào)用方式：元素對象 點 調(diào)用屬性名 obj.herf
• 部分屬性名沖突 跟換寫法
• class--className for--htmlFor rowspan--rowSpan
• 等號賦值 右側(cè)是字符串類型

===

獲取標簽內(nèi)部內(nèi)容的屬性

• innerHTML 和 innerText；

使用場景

• innerText 設置純字符串
• innerHTML 設置內(nèi)部子標簽結(jié)構(gòu)

===

非表單元素屬性

• value 用于大部分表單元素的內(nèi)容獲取（option除外）
• type 可以獲取input標簽的類型（輸入框或復選框）
• disabled 禁用屬性
• checked 復選框選中屬性
• selected 下拉框菜單選中屬性
• * DOM 中元素對象的屬性值只有一個時，會轉(zhuǎn)換成布爾值。

txt.disabled = true;===

自定義屬性操作

• .getAttribute(name) 獲取標簽行內(nèi)屬性
• .setAttribute(name,value) 設置標簽行內(nèi)屬性
• .removeAttribute(name) 移除標簽行內(nèi)屬性
• 與 element 屬性區(qū)別：上述方法用于獲取任意的行內(nèi)屬性，包括自定義屬性。

===

style 樣式屬性操作

• 使用 style 屬性方式設置樣式的顯示在標簽內(nèi)
• element.style 屬性的值 是所有行內(nèi)樣式組成的一個樣式對象
• 樣式對象可以直接打點調(diào)用或更改 css 的行內(nèi)樣式屬性

===

DOM 節(jié)點操作

節(jié)點屬性

· nodeType 節(jié)點的類型，屬性值為數(shù)字，表示不同的節(jié)點類型，共12種

1. 元素節(jié)點
2. 屬性節(jié)點
3. 文本節(jié)點

· nodeName 節(jié)點的名稱（標簽名稱）

· nodeValue 節(jié)點值沒返回或設置當前節(jié)點的值

===

父子節(jié)點常用屬性

• childNodes 只讀屬性，獲取一個節(jié)點所有子節(jié)點的實時的合集，集合是動態(tài)變化的。
• children 只讀屬性，返回一個節(jié)點所有的子元素節(jié)點集合 動態(tài)跟新的 HTML 元素
• firstChild 只讀屬性，返回該節(jié)點的第一個子節(jié)點，如果該節(jié)點沒有子節(jié)點則返回null。
• lastChild 只讀屬性，返回該節(jié)點的最后一個子節(jié)點，如果該節(jié)點沒有子節(jié)點返回null。
• parentNode 返回一個當前節(jié)點的父節(jié)點，如果沒有這樣的節(jié)點，比如說像這個節(jié)點是樹結(jié)構(gòu)的頂端或者沒有插入一棵樹中，這個屬性返回 null。
• parentElement 返回當前節(jié)點的父元素節(jié)點，如果該元素沒有父節(jié)點，或者父節(jié)點不是一個Dom 元素，則返回 null。

===

兄弟節(jié)點常用屬性

• nextSibling 只讀屬性，返回該節(jié)點同級的下一個節(jié)點，如果沒有返回 null
• previousSibling 只讀屬性，返回該節(jié)點同級的上一個節(jié)點，如果沒有返回 null
• nextElementSibling 只讀屬性 返回該節(jié)點同級的下一個元素節(jié)點，如果沒有返回 null
• previousElementSibling 只讀屬性 返回該節(jié)點同級的上一個元素節(jié)點，如果沒有返回 null

ps：nextElementSibling 、previousElementSibling 支持ie9+。

===

創(chuàng)建新節(jié)點的方法

document.createElement("div") // 創(chuàng)建元素節(jié)點document.createAttribute("id") //創(chuàng)建屬性節(jié)點document.createTextNode("hello") //創(chuàng)建文本節(jié)點一般將創(chuàng)建的新節(jié)點存在變量中，方便使用


節(jié)點常用操作方法 1

• parentNode.appendChild(child)：將一個節(jié)點添加到制定父節(jié)點的子節(jié)點列表末尾。
• parentNode.replaceChild(newChild,oldChild)：用指定的節(jié)點代替當前節(jié)點的一個子節(jié)點，并返回被替換掉的節(jié)點。
• parentNode.insertBefore(newNode,referenceNode)：在參考節(jié)點錢插入一個擁有指定父節(jié)點的子節(jié)點，referenceNode 必須設置，如果 referenceNode 為 null 則 newNode 將被插入到子節(jié)點的末尾
• parentNode.removeChild(child):移除當前節(jié)點的一個子節(jié)點。這個子節(jié)點必須存在于當前節(jié)點中。

節(jié)點常用操作方法 2

• node.cloneNode()：克隆一個節(jié)點，并且可以選擇是否克隆節(jié)點下所有內(nèi)容；參數(shù)為Boolean 布爾值，表示是否采用深度克隆，如果為 true 則克隆所有節(jié)點 為 false 則克隆該節(jié)點本身，默認值為 true 。
• ps：克隆時， 標簽屬性也屬性值會被復制，寫在標簽內(nèi)的綁定事件可以被復制，但是通過 js 動態(tài)綁定的時間不會被復制。

節(jié)點常用操作方法 3

• Node.hasChildNodes()；沒有參數(shù)，返回一個 Boolean 布爾值，來表示該元素是否包含有子節(jié)點
• Node.contains(child)；返回一個 Boolean 布爾值；來表示傳入的節(jié)點是否為該節(jié)點的后代節(jié)點。

判斷方法總結(jié)

• 有三種方法判斷當前節(jié)點是否有子節(jié)點
• node.firstChild !== null
• node.childNode.lenght > 0
• node.hasChildNodes()

=====

注冊事件得其他方法1

addEventListener()方法。

參數(shù)：

第一個參數(shù)：事件類型得字符串（直接書寫 click 不需要 on）

第二個參數(shù)：事件函數(shù)

注冊事件得其他方法2

element.attachEvent()

參數(shù)：

第一個參數(shù)：事件類型得字符串（需要 on）

第二個參數(shù)：事件函數(shù)




注冊事件的兼容寫法

• 自定義一個注冊事件函數(shù)
• 參數(shù)：事件源 事件類型（不加on） 事件函數(shù)
• ie9+ 使用 addEventListener
• ie9- 使用 attachEvent

移除事件的其他方法1

element.removeEventListener() 方法

參數(shù)：

第一個參數(shù)：事件類型得字符串（直接書寫 click 不需要 on）

第二個參數(shù)：事件函數(shù)引用名




移除事件的其他方法2

element.detachEvent() 方法

第一個參數(shù)：事件類型得字符串（需要 on）

第二個參數(shù)：事件函數(shù)




移除事件的兼容寫法

• 自定義一個注冊事件函數(shù)
• 參數(shù)：事件源 事件類型（不加on） 事件函數(shù)
• ie9+ 使用 removeEventListener
• ie9- 使用 detachEvent

事件流的三個階段

1. 事件捕獲
2. 實踐執(zhí)行過程
3. 事件冒泡
4. addEventListener() 第三個參數(shù)為 false 時間冒泡
5. addEventListener() 第三個參數(shù)為 true 事件捕獲
6. onclick 類型；只能進行事件冒泡，沒有捕獲階段
7. attachEvent() 方法：只能進行冒泡，沒有捕獲階段

事件對象

• 只要觸發(fā)事件，就有一個對象
• e 低版本 window.event
• 常用屬性

e.eventPhase 查看事件觸發(fā)所處階段e.target 獲取觸發(fā)事件的元素e.srcElement 獲取觸發(fā)事件的元素，低版本e.currentTarget 獲取綁定事件的事件源元素e.type 獲取事件類型e.clientX / e.clientY 鼠標距離瀏覽器窗口左上角距離e.pageX / e.pageY 鼠標距離HTML頁面頂點的距離


取消默認行為和阻止事件傳播的方式

e.preventDefault() 取消默認行為e.returnValue 取消默認行為，low e.stopPropagation() 阻止冒泡 標準e.cancelBubble = true; 阻止冒泡 低 廢


DOM特效

偏移量屬性

offsetParent 偏移參考父級 距離自己最近的有定位的父級，如果沒有參考bodyoffsetLeft / offsetTop 偏移位置offsetWidth / offsetHeight 偏移大小滾動偏移屬性

scrollLeft / scrollTopscrollWidth / scrollHeight





================================

BOM

window 對象

• window 是瀏覽器頂級對象，當調(diào)用 window 下的屬性和方法時，可以省略 window
• 注意：window 下兩個特殊的屬性 window.name、window.top

onload 事件

• 給window 對象 或者 img 等元素 添加 onload 加載事件，表示只有綁定事件的元素加載完畢才能觸發(fā)事件，才能執(zhí)行事件函數(shù)。
• window 對象加載完畢：指所有的 HTML 結(jié)構(gòu)加載完，并且外部引用資源（js、css、img、video）也加載完畢

應用

• 利用 window.onload 事件，將 js 代碼提前到 html 結(jié)構(gòu)之前
• 注意：一個頁面只能有一個 window.onload 事件。

延時器

• 延時器是 window 對象的一個方法，類似于定時炸彈
• 語法：window.setTimeout(func,time);
• 第一個參數(shù)：延時執(zhí)行的函數(shù)，可以是匿名函數(shù)定義，函數(shù)名的引用，注意不要加 ()
• 第二個參數(shù)：延時的時間，以毫秒計數(shù)，1000 = 1s
• 功能：在指定時間后，延遲執(zhí)行一個函數(shù)。

清除延時器

• window 對象的一個方法
• 語法：window.clearTimeout(timeout);
• 參數(shù)：指定的延時器變量名引用
• 功能：清除指定的延時器
• 注意：清除延時器需要儲存到一個變量中，便于后期清除調(diào)用。

定時器

• 語法：window.setInterval(func,interval)
• 第一個參數(shù)：延時執(zhí)行的函數(shù)，可以是匿名函數(shù)定義，函數(shù)名的引用，注意不要加 ()
• 第二個參數(shù)：延時的時間，以毫秒計數(shù)，1000 = 1s
• 功能：每隔一個指定時間，周期性的執(zhí)行一個函數(shù)。

清除定時器

• window 對象的一個方法
• 語法：window.clearInterval(timer);
• 參數(shù)：指定的延時器變量名引用
• 功能：清除指定的延時器
• 注意：清除延時器需要儲存到一個變量中，便于后期清除調(diào)用

封裝動畫函數(shù)