前言

以下幾個API，在web開發中可以簡化我們一部分互動操作，尤其是DOM監聽API,對於我們頁面，有一些不錯的提升。

Fullscreen API

有時候我們想要全屏預覽的效果，比如類似於圖片預覽、幻燈片播放等。全屏API是一個很好的選擇。

基本用法開啟全屏

   element.requestFullscreen().then(() => {       // 成功的處理   }).catch(err => {       // 失敗的處理   })

退出全屏

   element.exitFullscreen().then(() => {       // 成功的處理   }).catch(err => {       // 失敗的處理   })

事件

fullscreenchange監聽元素全屏、退出全屏的變化；fullscreenerror監聽全屏請求失敗。

注意事項

在iframe中，如果要手動呼叫fullscreen API，可能會遇到錯誤Document is not active，是因為沒有給iframe元素賦予fullscreen的許可權。此時應該給iframe增加屬性allowfullscreen。

MutationObserver

MutationObserver目前是DOM變化監聽神器。主要原因有二：

非同步監聽DOM變化，不影響頁面效能可以細粒度的監聽DOM內容變化，元素、屬性、文字的變化都能檢測到，且能夠比較出新舊值的差異

在一定程度上，使用它能夠做到文件內容的撤銷、重做。

基本用法例項化

var observerInstance = new MutationObserver(function (mutations, observer) {    // mutations為變化內容描述    mutations.forEach(function(mutation) {        console.log(mutation);    });});

每次DOM變化，都會觸發例項化中的回撥方法

方法新增元素監聽

// 監聽body中元素的變化observerInstance.observer(document.body, {    attributes: true, // 屬性    characterData: true, // 文字    childList: true, // 子節點    subtree: true, // 後代節點    attributeOldValue: true, // 屬性舊值    characterDataOldValue: true // 舊文字})

移除元素監聽

observerInstance.disconnect()

呼叫此方法後，將停止對已新增元素的監聽

清楚變動記錄

observerInstance.takeRecords()

因為監聽是非同步的，不是每次DOM變動都實時觸發，此方法的呼叫，會使歷史快取的變化資訊被清空。

IntersectionObserver

IntersectionObserver與MutationObserver使用方法比較類似，原理也有點類似，只是前者的主要作用是監測元素的可見性變化，後者主要是監測DOM的變化。兩者都是非同步操作，不會影響頁面效能。利用此API，實現上拉列表重新整理，下拉載入更多將會變得非常簡單。

基本用法例項化

var observerInstance = new IntersectionObserver(function (entries) {    // intersectionRatio代表元素的可見比例，可見大於0，不可見小於等於0    if (entries[0].intersectionRatio <= 0) return;    loadItems(10);}, {    threshold: [0, 0.25, 0.5, 0.75, 1] // 監聽物件的交叉區域與邊界區域的比率,預設是0  });

方法新增元素監聽

// 監聽特定元素，每次呼叫都會重新新增一個元素的監聽observerInstance.observer(document.getElement('item1'))

移除元素監聽

observerInstance.disconnect()

呼叫此方法後，將停止對已新增元素的監聽

返回所有觀察目標陣列

let IntersectionObserverEntryList = observerInstance.takeRecords()

停止觀察特定元素

observerInstance.unobserver()