'JavaScript系統學習DOM系列文章之20個不得不學的新API'

程序猿就是一個活到老學到老的職業，如果你不想被淘汰，就得逼著自己去優秀。WEB技術隨著大潮發生了很多變化，尤其是2.0後時代階段，Ember、Angular、React、Vue的興起，極大的推動了WEB行業的變革。大多數的人開始被分成兩大組——使用框架和制定框架，人們越來越喜歡拿來即用的東西，卻很容易忽略箱子裡面的東西...

本期繼續分享DOM相關的一些小知識點，隨著HTML5時代的到來，WEB API迎來了一次較大範圍的更新，為WEB開發帶來了一些福利。新的API在現代的瀏覽器的支持下“表現得更優秀”，也加快了互聯網的發展。

1、querySelector和querySelectorAll

querySelector獲取指定元素中匹配css選擇器的元素；querySelectorAll獲取指定元素中匹配css選擇器的所有元素

注意：無論如何只返回一個元素，如果有多個素，那也只返回第一個；querySelectorAll返回的值是一個類數組，無法使用數組的原生方法（forEach、map等），需要轉換一下

Array.from(list).map();

兼容性

2、closest

跟querySelector相反，該元素可以向上查詢，也就是可以查詢到父元素

document.querySelector("li").closest("#nav");

其實類似於parentNode和parentElement，可以看看它的profill

兼容性

3、dataset

就跟原生微信小程序一樣，能獲取標籤上以"data-"為前綴的屬性集合：

<p data-name="蜘蛛俠" data-age="16"></p>

document.querySelector("p").dataset; // {name: "蜘蛛俠", age: "16"}

注意：雖然可以用getAttribute方法獲取任何屬性值，但是性質卻不一樣，這是開發規範問題，凡是自定義屬性都要加上data-前綴哦

兼容性

4、URLSearchParams

假設瀏覽器的url參數是 "?name=蜘蛛俠&age=16"，還記得我們是怎麼處理的嗎？

現在告訴大家一個新的API，這個使用就更方便了

new URLSearchParams(location.search).get("name"); // 蜘蛛俠

運行結果

URLSearchParams 接口定義了一些實用的方法來處理 URL 的查詢字符串

兼容性

5、hidden

這是一個html屬性，規定元素是否隱藏，表現跟css的display: none一致：

<div hidden>我被隱藏了</div>

document.querySelector("div").hidden = true / false;

現在我們操作dom的顯示與隱藏也可以像JQuery一樣方便啦

兼容性

6、contenteditable

可以使一個元素可以被用戶編輯：

<p contenteditable>我是P元素，但是我也可以被編輯</p>
複製代碼

效果如下：

很多簡單的editor就是基於此屬性實現的，功能比textarea更強大，容錯也更好

兼容性

7、speelcheck

也是一個html屬性，規定輸入的內容是否檢查英文的拼寫（像不像Office裡面的拼寫檢查）

<!-- 默認就是true，可省略 -->
<textarea spellcheck="true"></textarea>

效果如下：

設置不檢查：

<textarea spellcheck="false"></textarea>

效果如下：

兼容性

8、classList

大家還記得JQuery時代前操作原生JS操作class的痛苦吧，需要單獨封裝一個工具庫

現在提供的classList是一個對象，該對象裡封裝了許多操作元素類名的方法：

兼容性

9、getBoundingClientRect（這個不是新的，但是大多數人沒怎麼用過）

可以獲取指定元素在當前頁面的空間信息：

elem.getBoundingClientRect();

// 返回
{
 x: 604.875,
 y: 1312,
 width: 701.625,
 height: 31,
 top: 1312,
 right: 1306.5,
 bottom: 1343,
 left: 604.875
}

說明：top是距離文檔頂部的距離，y則是距離可視窗口（瀏覽器屏幕）的頂部距離，如果瀏覽器滾動，top值不變，y值會變

兼容性

10、contains

可以判斷指定元素是否包含了指定的子元素：

<div>
 <p></p>
</div>

document.querySelector("div").contains(document.querySelector("p")); // true

兼容性

11、online state

是不是很想像APP一樣監聽當前網頁的網絡狀態變動，尤其是一些ERP，然後執行對應的方法：

window.addEventListener("online", xxx);
window.addEventListener("offline", () => {
 alert("你斷網啦！");
});

// addEventListener version
window.addEventListener('online', (event) => {
 console.log("You are now connected to the network.");
});
// ononline version
window.ononline = (event) => {
 console.log("You are now connected to the network.");
};

可以模擬看下效果

兼容性

12、battery state

獲取設備的電池狀態

This feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.

navigator.getBattery().then(battery => console.log(battery));

// 返回
{
 charging, // 是否在充電
 chargingTime, // 充滿電所需時間
 dischargingTime, // 當前電量可使用時間
 level, 剩餘電量
 onchargingchange, // 監聽充電狀態變化
 onchargingtimechange, // 監聽充滿電所需時間變化
 ondischargingtimechange, // 監聽當前電量可使用時間變化
 onlevelchange // 監聽電量變化
}

使用場景：提示用戶電量已充滿，或者為了讓用戶有安全感，電量低於15%的時候來個彈框提示需要保存某些重要操作，防止斷電帶來的不必要損失

兼容性

13、vibration

使設備進行震動，更貼近原生應用開發：

// 震動一次
navigator.vibrate(100);
// 連續震動，震動200ms、暫停100ms、震動300ms
navigator.vibrate([200, 100, 300]);
// vibrate for 200ms
navigator.vibrate(200); 
// Vibrate 'SOS' in Morse.
navigator.vibrate([100,30,100,30,100,30,200,30,200,30,200,30,100,30,100,30,100]); 

使用場景：通過振動來提供感官反饋，比如太久沒有觸摸屏幕的時候連續震動提醒用戶

兼容性

14、page visibility

有沒有小夥伴發現做在線筆試的時候不允許隨意切換瀏覽器的tab，一旦隨意切換，就會彈出一個提示！！！嘿嘿，別問我怎麼知道的。

大家好不好奇，是如何監聽到頁面的變化？

page visibility顧名思義，這個API是用來監聽頁面可見性變化的，在PC端標籤欄切換、最小化會觸發、在移動端程序切到後臺會觸發，簡單說就是頁面消失了‍♂️

document.addEventListener("visibilitychange", () => {
 console.log(`頁面可見性：${document.visibilityState}`);
});

PC端效果如下

移動端效果如下

使用場景：當程序切到後臺的時候，如果當前有視頻播放或者一些動畫執行，可以先暫停

兼容性

15、deviceOrientation

陀螺儀，也就是設備的方向，又名重力感應，該API在IOS設備上失效的解決辦法，將域名協議改成https

從左到右分別為alpha、beta、gamma;

window.addEventListener("deviceorientation", event => {
 let {
 alpha,
 beta,
 gamma
 } = event;
 console.log(`alpha：${alpha}`);
 console.log(`beta：${beta}`);
 console.log(`gamma：${gamma}`);
});

移動端效果如下（此時手機在不停的轉動）

使用場景：頁面上的某些元素需要根據手機擺動進行移動，達到視差的效果，比如王者榮耀進入遊戲的那個界面，手機轉動背景圖會跟著動

兼容性

16、orientation

可以監聽用戶手機設備的旋轉方向變化；

 window.addEventListener("orientationchange", () => {
 document.body.innerHTML += `<p>屏幕旋轉後的角度值：${window.orientation}</p>`;
}, false);

效果如下：

也可以使用css的媒體查詢：

/* 豎屏時樣式 */
@media all and (orientation: portrait) {
 body::after {
 content: "豎屏"
 }
}
/* 橫屏時樣式 */
@media all and (orientation: landscape) {
 body::after {
 content: "橫屏"
 }
}

使用場景：頁面需要用戶開啟橫屏來獲得更好的體驗，主要用在PAD上開發類似ERP

兼容性

17、toDataURL

這個canvas的API，作用是將畫布的內容轉換成一個base64的圖片地址；

let canvas = document.querySelector("canvas");
let context = canvas.getContext("2d");
// 畫東西
...
let url = canvas.toDataURL("image/png"); // 將畫布內容轉換成base64地址

使用a標籤進行圖片下載時，圖片鏈接跨域（圖片是我的掘金頭像），無法進行下載而是進行圖片預覽

<img src="xxx">
<button>
 <a href="xxx" download="avatar">下載圖片</a>
</button>

效果如下：

封裝以下代碼便可解決

效果如下：

或者將當前的DOM轉換成圖片進行下載，常用於生成海報： 如html2canvas庫

兼容性

18、customEvent

自定義事件，就跟vue裡面的on跟emit一樣；

監聽自定義事件：

window.addEventListener("follow", event => {
 console.log(event.detail); // 輸出 {name: "前端宇宙情報局"}
});

派發自定義事件：

window.dispatchEvent(new CustomEvent("follow", {
 detail: {
 name: "前端宇宙情報局"
 }
}));

兼容性

19、notification

PC端的桌面通知，如網頁端的微信，當收到消息時，右下角會出現一個通知（儘管你把瀏覽器最小化），因為這個通知時獨立於瀏覽器的，是系統的一個原生控件；

注意：想要成功的調起通知，首先要用戶的授權

Notification.requestPermission(prem => {
 prem == "granted" // 同意
 prem == "denied" // 拒絕
})

"

程序猿就是一個活到老學到老的職業，如果你不想被淘汰，就得逼著自己去優秀。WEB技術隨著大潮發生了很多變化，尤其是2.0後時代階段，Ember、Angular、React、Vue的興起，極大的推動了WEB行業的變革。大多數的人開始被分成兩大組——使用框架和制定框架，人們越來越喜歡拿來即用的東西，卻很容易忽略箱子裡面的東西...

本期繼續分享DOM相關的一些小知識點，隨著HTML5時代的到來，WEB API迎來了一次較大範圍的更新，為WEB開發帶來了一些福利。新的API在現代的瀏覽器的支持下“表現得更優秀”，也加快了互聯網的發展。

1、querySelector和querySelectorAll

querySelector獲取指定元素中匹配css選擇器的元素；querySelectorAll獲取指定元素中匹配css選擇器的所有元素

注意：無論如何只返回一個元素，如果有多個素，那也只返回第一個；querySelectorAll返回的值是一個類數組，無法使用數組的原生方法（forEach、map等），需要轉換一下

Array.from(list).map();

兼容性

2、closest

跟querySelector相反，該元素可以向上查詢，也就是可以查詢到父元素

document.querySelector("li").closest("#nav");

其實類似於parentNode和parentElement，可以看看它的profill

兼容性

3、dataset

就跟原生微信小程序一樣，能獲取標籤上以"data-"為前綴的屬性集合：

<p data-name="蜘蛛俠" data-age="16"></p>

document.querySelector("p").dataset; // {name: "蜘蛛俠", age: "16"}

注意：雖然可以用getAttribute方法獲取任何屬性值，但是性質卻不一樣，這是開發規範問題，凡是自定義屬性都要加上data-前綴哦

兼容性

4、URLSearchParams

假設瀏覽器的url參數是 "?name=蜘蛛俠&age=16"，還記得我們是怎麼處理的嗎？

現在告訴大家一個新的API，這個使用就更方便了

new URLSearchParams(location.search).get("name"); // 蜘蛛俠

運行結果

URLSearchParams 接口定義了一些實用的方法來處理 URL 的查詢字符串

兼容性

5、hidden

這是一個html屬性，規定元素是否隱藏，表現跟css的display: none一致：

<div hidden>我被隱藏了</div>

document.querySelector("div").hidden = true / false;

現在我們操作dom的顯示與隱藏也可以像JQuery一樣方便啦

兼容性

6、contenteditable

可以使一個元素可以被用戶編輯：

<p contenteditable>我是P元素，但是我也可以被編輯</p>
複製代碼

效果如下：

很多簡單的editor就是基於此屬性實現的，功能比textarea更強大，容錯也更好

兼容性

7、speelcheck

也是一個html屬性，規定輸入的內容是否檢查英文的拼寫（像不像Office裡面的拼寫檢查）

<!-- 默認就是true，可省略 -->
<textarea spellcheck="true"></textarea>

效果如下：

設置不檢查：

<textarea spellcheck="false"></textarea>

效果如下：

兼容性

8、classList

大家還記得JQuery時代前操作原生JS操作class的痛苦吧，需要單獨封裝一個工具庫

現在提供的classList是一個對象，該對象裡封裝了許多操作元素類名的方法：

兼容性

9、getBoundingClientRect（這個不是新的，但是大多數人沒怎麼用過）

可以獲取指定元素在當前頁面的空間信息：

elem.getBoundingClientRect();

// 返回
{
 x: 604.875,
 y: 1312,
 width: 701.625,
 height: 31,
 top: 1312,
 right: 1306.5,
 bottom: 1343,
 left: 604.875
}

說明：top是距離文檔頂部的距離，y則是距離可視窗口（瀏覽器屏幕）的頂部距離，如果瀏覽器滾動，top值不變，y值會變

兼容性

10、contains

可以判斷指定元素是否包含了指定的子元素：

<div>
 <p></p>
</div>

document.querySelector("div").contains(document.querySelector("p")); // true

兼容性

11、online state

是不是很想像APP一樣監聽當前網頁的網絡狀態變動，尤其是一些ERP，然後執行對應的方法：

window.addEventListener("online", xxx);
window.addEventListener("offline", () => {
 alert("你斷網啦！");
});

// addEventListener version
window.addEventListener('online', (event) => {
 console.log("You are now connected to the network.");
});
// ononline version
window.ononline = (event) => {
 console.log("You are now connected to the network.");
};

可以模擬看下效果

兼容性

12、battery state

獲取設備的電池狀態

This feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.

navigator.getBattery().then(battery => console.log(battery));

// 返回
{
 charging, // 是否在充電
 chargingTime, // 充滿電所需時間
 dischargingTime, // 當前電量可使用時間
 level, 剩餘電量
 onchargingchange, // 監聽充電狀態變化
 onchargingtimechange, // 監聽充滿電所需時間變化
 ondischargingtimechange, // 監聽當前電量可使用時間變化
 onlevelchange // 監聽電量變化
}

使用場景：提示用戶電量已充滿，或者為了讓用戶有安全感，電量低於15%的時候來個彈框提示需要保存某些重要操作，防止斷電帶來的不必要損失

兼容性

13、vibration

使設備進行震動，更貼近原生應用開發：

// 震動一次
navigator.vibrate(100);
// 連續震動，震動200ms、暫停100ms、震動300ms
navigator.vibrate([200, 100, 300]);
// vibrate for 200ms
navigator.vibrate(200); 
// Vibrate 'SOS' in Morse.
navigator.vibrate([100,30,100,30,100,30,200,30,200,30,200,30,100,30,100,30,100]); 

使用場景：通過振動來提供感官反饋，比如太久沒有觸摸屏幕的時候連續震動提醒用戶

兼容性

14、page visibility

有沒有小夥伴發現做在線筆試的時候不允許隨意切換瀏覽器的tab，一旦隨意切換，就會彈出一個提示！！！嘿嘿，別問我怎麼知道的。

大家好不好奇，是如何監聽到頁面的變化？

page visibility顧名思義，這個API是用來監聽頁面可見性變化的，在PC端標籤欄切換、最小化會觸發、在移動端程序切到後臺會觸發，簡單說就是頁面消失了‍♂️

document.addEventListener("visibilitychange", () => {
 console.log(`頁面可見性：${document.visibilityState}`);
});

PC端效果如下

移動端效果如下

使用場景：當程序切到後臺的時候，如果當前有視頻播放或者一些動畫執行，可以先暫停

兼容性

15、deviceOrientation

陀螺儀，也就是設備的方向，又名重力感應，該API在IOS設備上失效的解決辦法，將域名協議改成https

從左到右分別為alpha、beta、gamma;

window.addEventListener("deviceorientation", event => {
 let {
 alpha,
 beta,
 gamma
 } = event;
 console.log(`alpha：${alpha}`);
 console.log(`beta：${beta}`);
 console.log(`gamma：${gamma}`);
});

移動端效果如下（此時手機在不停的轉動）

使用場景：頁面上的某些元素需要根據手機擺動進行移動，達到視差的效果，比如王者榮耀進入遊戲的那個界面，手機轉動背景圖會跟著動

兼容性

16、orientation

可以監聽用戶手機設備的旋轉方向變化；

 window.addEventListener("orientationchange", () => {
 document.body.innerHTML += `<p>屏幕旋轉後的角度值：${window.orientation}</p>`;
}, false);

效果如下：

也可以使用css的媒體查詢：

/* 豎屏時樣式 */
@media all and (orientation: portrait) {
 body::after {
 content: "豎屏"
 }
}
/* 橫屏時樣式 */
@media all and (orientation: landscape) {
 body::after {
 content: "橫屏"
 }
}

使用場景：頁面需要用戶開啟橫屏來獲得更好的體驗，主要用在PAD上開發類似ERP

兼容性

17、toDataURL

這個canvas的API，作用是將畫布的內容轉換成一個base64的圖片地址；

let canvas = document.querySelector("canvas");
let context = canvas.getContext("2d");
// 畫東西
...
let url = canvas.toDataURL("image/png"); // 將畫布內容轉換成base64地址

使用a標籤進行圖片下載時，圖片鏈接跨域（圖片是我的掘金頭像），無法進行下載而是進行圖片預覽

<img src="xxx">
<button>
 <a href="xxx" download="avatar">下載圖片</a>
</button>

效果如下：

封裝以下代碼便可解決

效果如下：

或者將當前的DOM轉換成圖片進行下載，常用於生成海報： 如html2canvas庫

兼容性

18、customEvent

自定義事件，就跟vue裡面的on跟emit一樣；

監聽自定義事件：

window.addEventListener("follow", event => {
 console.log(event.detail); // 輸出 {name: "前端宇宙情報局"}
});

派發自定義事件：

window.dispatchEvent(new CustomEvent("follow", {
 detail: {
 name: "前端宇宙情報局"
 }
}));

兼容性

19、notification

PC端的桌面通知，如網頁端的微信，當收到消息時，右下角會出現一個通知（儘管你把瀏覽器最小化），因為這個通知時獨立於瀏覽器的，是系統的一個原生控件；

注意：想要成功的調起通知，首先要用戶的授權

Notification.requestPermission(prem => {
 prem == "granted" // 同意
 prem == "denied" // 拒絕
})

所以，再調用之前先向用戶發起請求：

let permission = Notification.permission;
if (permission == "granted") {
 // 已同意，開始發送通知
 ...
} else if (permission == "denied") {
 // 不同意，發不了咯
} else {
 // 其他狀態，可以重新發送授權提示
 Notification.requestPermission();
}

"

程序猿就是一個活到老學到老的職業，如果你不想被淘汰，就得逼著自己去優秀。WEB技術隨著大潮發生了很多變化，尤其是2.0後時代階段，Ember、Angular、React、Vue的興起，極大的推動了WEB行業的變革。大多數的人開始被分成兩大組——使用框架和制定框架，人們越來越喜歡拿來即用的東西，卻很容易忽略箱子裡面的東西...

本期繼續分享DOM相關的一些小知識點，隨著HTML5時代的到來，WEB API迎來了一次較大範圍的更新，為WEB開發帶來了一些福利。新的API在現代的瀏覽器的支持下“表現得更優秀”，也加快了互聯網的發展。

1、querySelector和querySelectorAll

querySelector獲取指定元素中匹配css選擇器的元素；querySelectorAll獲取指定元素中匹配css選擇器的所有元素

注意：無論如何只返回一個元素，如果有多個素，那也只返回第一個；querySelectorAll返回的值是一個類數組，無法使用數組的原生方法（forEach、map等），需要轉換一下

Array.from(list).map();

兼容性

2、closest

跟querySelector相反，該元素可以向上查詢，也就是可以查詢到父元素

document.querySelector("li").closest("#nav");

其實類似於parentNode和parentElement，可以看看它的profill

兼容性

3、dataset

就跟原生微信小程序一樣，能獲取標籤上以"data-"為前綴的屬性集合：

<p data-name="蜘蛛俠" data-age="16"></p>

document.querySelector("p").dataset; // {name: "蜘蛛俠", age: "16"}

注意：雖然可以用getAttribute方法獲取任何屬性值，但是性質卻不一樣，這是開發規範問題，凡是自定義屬性都要加上data-前綴哦

兼容性

4、URLSearchParams

假設瀏覽器的url參數是 "?name=蜘蛛俠&age=16"，還記得我們是怎麼處理的嗎？

現在告訴大家一個新的API，這個使用就更方便了

new URLSearchParams(location.search).get("name"); // 蜘蛛俠

運行結果

URLSearchParams 接口定義了一些實用的方法來處理 URL 的查詢字符串

兼容性

5、hidden

這是一個html屬性，規定元素是否隱藏，表現跟css的display: none一致：

<div hidden>我被隱藏了</div>

document.querySelector("div").hidden = true / false;

現在我們操作dom的顯示與隱藏也可以像JQuery一樣方便啦

兼容性

6、contenteditable

可以使一個元素可以被用戶編輯：

<p contenteditable>我是P元素，但是我也可以被編輯</p>
複製代碼

效果如下：

很多簡單的editor就是基於此屬性實現的，功能比textarea更強大，容錯也更好

兼容性

7、speelcheck

也是一個html屬性，規定輸入的內容是否檢查英文的拼寫（像不像Office裡面的拼寫檢查）

<!-- 默認就是true，可省略 -->
<textarea spellcheck="true"></textarea>

效果如下：

設置不檢查：

<textarea spellcheck="false"></textarea>

效果如下：

兼容性

8、classList

大家還記得JQuery時代前操作原生JS操作class的痛苦吧，需要單獨封裝一個工具庫

現在提供的classList是一個對象，該對象裡封裝了許多操作元素類名的方法：

兼容性

9、getBoundingClientRect（這個不是新的，但是大多數人沒怎麼用過）

可以獲取指定元素在當前頁面的空間信息：

elem.getBoundingClientRect();

// 返回
{
 x: 604.875,
 y: 1312,
 width: 701.625,
 height: 31,
 top: 1312,
 right: 1306.5,
 bottom: 1343,
 left: 604.875
}

說明：top是距離文檔頂部的距離，y則是距離可視窗口（瀏覽器屏幕）的頂部距離，如果瀏覽器滾動，top值不變，y值會變

兼容性

10、contains

可以判斷指定元素是否包含了指定的子元素：

<div>
 <p></p>
</div>

document.querySelector("div").contains(document.querySelector("p")); // true

兼容性

11、online state

是不是很想像APP一樣監聽當前網頁的網絡狀態變動，尤其是一些ERP，然後執行對應的方法：

window.addEventListener("online", xxx);
window.addEventListener("offline", () => {
 alert("你斷網啦！");
});

// addEventListener version
window.addEventListener('online', (event) => {
 console.log("You are now connected to the network.");
});
// ononline version
window.ononline = (event) => {
 console.log("You are now connected to the network.");
};

可以模擬看下效果

兼容性

12、battery state

獲取設備的電池狀態

This feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.

navigator.getBattery().then(battery => console.log(battery));

// 返回
{
 charging, // 是否在充電
 chargingTime, // 充滿電所需時間
 dischargingTime, // 當前電量可使用時間
 level, 剩餘電量
 onchargingchange, // 監聽充電狀態變化
 onchargingtimechange, // 監聽充滿電所需時間變化
 ondischargingtimechange, // 監聽當前電量可使用時間變化
 onlevelchange // 監聽電量變化
}

使用場景：提示用戶電量已充滿，或者為了讓用戶有安全感，電量低於15%的時候來個彈框提示需要保存某些重要操作，防止斷電帶來的不必要損失

兼容性

13、vibration

使設備進行震動，更貼近原生應用開發：

// 震動一次
navigator.vibrate(100);
// 連續震動，震動200ms、暫停100ms、震動300ms
navigator.vibrate([200, 100, 300]);
// vibrate for 200ms
navigator.vibrate(200); 
// Vibrate 'SOS' in Morse.
navigator.vibrate([100,30,100,30,100,30,200,30,200,30,200,30,100,30,100,30,100]); 

使用場景：通過振動來提供感官反饋，比如太久沒有觸摸屏幕的時候連續震動提醒用戶

兼容性

14、page visibility

有沒有小夥伴發現做在線筆試的時候不允許隨意切換瀏覽器的tab，一旦隨意切換，就會彈出一個提示！！！嘿嘿，別問我怎麼知道的。

大家好不好奇，是如何監聽到頁面的變化？

page visibility顧名思義，這個API是用來監聽頁面可見性變化的，在PC端標籤欄切換、最小化會觸發、在移動端程序切到後臺會觸發，簡單說就是頁面消失了‍♂️

document.addEventListener("visibilitychange", () => {
 console.log(`頁面可見性：${document.visibilityState}`);
});

PC端效果如下

移動端效果如下

使用場景：當程序切到後臺的時候，如果當前有視頻播放或者一些動畫執行，可以先暫停

兼容性

15、deviceOrientation

陀螺儀，也就是設備的方向，又名重力感應，該API在IOS設備上失效的解決辦法，將域名協議改成https

從左到右分別為alpha、beta、gamma;

window.addEventListener("deviceorientation", event => {
 let {
 alpha,
 beta,
 gamma
 } = event;
 console.log(`alpha：${alpha}`);
 console.log(`beta：${beta}`);
 console.log(`gamma：${gamma}`);
});

移動端效果如下（此時手機在不停的轉動）

使用場景：頁面上的某些元素需要根據手機擺動進行移動，達到視差的效果，比如王者榮耀進入遊戲的那個界面，手機轉動背景圖會跟著動

兼容性

16、orientation

可以監聽用戶手機設備的旋轉方向變化；

 window.addEventListener("orientationchange", () => {
 document.body.innerHTML += `<p>屏幕旋轉後的角度值：${window.orientation}</p>`;
}, false);

效果如下：

也可以使用css的媒體查詢：

/* 豎屏時樣式 */
@media all and (orientation: portrait) {
 body::after {
 content: "豎屏"
 }
}
/* 橫屏時樣式 */
@media all and (orientation: landscape) {
 body::after {
 content: "橫屏"
 }
}

使用場景：頁面需要用戶開啟橫屏來獲得更好的體驗，主要用在PAD上開發類似ERP

兼容性

17、toDataURL

這個canvas的API，作用是將畫布的內容轉換成一個base64的圖片地址；

let canvas = document.querySelector("canvas");
let context = canvas.getContext("2d");
// 畫東西
...
let url = canvas.toDataURL("image/png"); // 將畫布內容轉換成base64地址

使用a標籤進行圖片下載時，圖片鏈接跨域（圖片是我的掘金頭像），無法進行下載而是進行圖片預覽

<img src="xxx">
<button>
 <a href="xxx" download="avatar">下載圖片</a>
</button>

效果如下：

封裝以下代碼便可解決

效果如下：

或者將當前的DOM轉換成圖片進行下載，常用於生成海報： 如html2canvas庫

兼容性

18、customEvent

自定義事件，就跟vue裡面的on跟emit一樣；

監聽自定義事件：

window.addEventListener("follow", event => {
 console.log(event.detail); // 輸出 {name: "前端宇宙情報局"}
});

派發自定義事件：

window.dispatchEvent(new CustomEvent("follow", {
 detail: {
 name: "前端宇宙情報局"
 }
}));

兼容性

19、notification

PC端的桌面通知，如網頁端的微信，當收到消息時，右下角會出現一個通知（儘管你把瀏覽器最小化），因為這個通知時獨立於瀏覽器的，是系統的一個原生控件；

注意：想要成功的調起通知，首先要用戶的授權

Notification.requestPermission(prem => {
 prem == "granted" // 同意
 prem == "denied" // 拒絕
})

所以，再調用之前先向用戶發起請求：

let permission = Notification.permission;
if (permission == "granted") {
 // 已同意，開始發送通知
 ...
} else if (permission == "denied") {
 // 不同意，發不了咯
} else {
 // 其他狀態，可以重新發送授權提示
 Notification.requestPermission();
}

有點醜哈，但是這是原生的！

兼容性

"

程序猿就是一個活到老學到老的職業，如果你不想被淘汰，就得逼著自己去優秀。WEB技術隨著大潮發生了很多變化，尤其是2.0後時代階段，Ember、Angular、React、Vue的興起，極大的推動了WEB行業的變革。大多數的人開始被分成兩大組——使用框架和制定框架，人們越來越喜歡拿來即用的東西，卻很容易忽略箱子裡面的東西...

本期繼續分享DOM相關的一些小知識點，隨著HTML5時代的到來，WEB API迎來了一次較大範圍的更新，為WEB開發帶來了一些福利。新的API在現代的瀏覽器的支持下“表現得更優秀”，也加快了互聯網的發展。

1、querySelector和querySelectorAll

querySelector獲取指定元素中匹配css選擇器的元素；querySelectorAll獲取指定元素中匹配css選擇器的所有元素

注意：無論如何只返回一個元素，如果有多個素，那也只返回第一個；querySelectorAll返回的值是一個類數組，無法使用數組的原生方法（forEach、map等），需要轉換一下

Array.from(list).map();

兼容性

2、closest

跟querySelector相反，該元素可以向上查詢，也就是可以查詢到父元素

document.querySelector("li").closest("#nav");

其實類似於parentNode和parentElement，可以看看它的profill

兼容性

3、dataset

就跟原生微信小程序一樣，能獲取標籤上以"data-"為前綴的屬性集合：

<p data-name="蜘蛛俠" data-age="16"></p>

document.querySelector("p").dataset; // {name: "蜘蛛俠", age: "16"}

注意：雖然可以用getAttribute方法獲取任何屬性值，但是性質卻不一樣，這是開發規範問題，凡是自定義屬性都要加上data-前綴哦

兼容性

4、URLSearchParams

假設瀏覽器的url參數是 "?name=蜘蛛俠&age=16"，還記得我們是怎麼處理的嗎？

現在告訴大家一個新的API，這個使用就更方便了

new URLSearchParams(location.search).get("name"); // 蜘蛛俠

運行結果

URLSearchParams 接口定義了一些實用的方法來處理 URL 的查詢字符串

兼容性

5、hidden

這是一個html屬性，規定元素是否隱藏，表現跟css的display: none一致：

<div hidden>我被隱藏了</div>

document.querySelector("div").hidden = true / false;

現在我們操作dom的顯示與隱藏也可以像JQuery一樣方便啦

兼容性

6、contenteditable

可以使一個元素可以被用戶編輯：

<p contenteditable>我是P元素，但是我也可以被編輯</p>
複製代碼

效果如下：

很多簡單的editor就是基於此屬性實現的，功能比textarea更強大，容錯也更好

兼容性

7、speelcheck

也是一個html屬性，規定輸入的內容是否檢查英文的拼寫（像不像Office裡面的拼寫檢查）

<!-- 默認就是true，可省略 -->
<textarea spellcheck="true"></textarea>

效果如下：

設置不檢查：

<textarea spellcheck="false"></textarea>

效果如下：

兼容性

8、classList

大家還記得JQuery時代前操作原生JS操作class的痛苦吧，需要單獨封裝一個工具庫

現在提供的classList是一個對象，該對象裡封裝了許多操作元素類名的方法：

兼容性

9、getBoundingClientRect（這個不是新的，但是大多數人沒怎麼用過）

可以獲取指定元素在當前頁面的空間信息：

elem.getBoundingClientRect();

// 返回
{
 x: 604.875,
 y: 1312,
 width: 701.625,
 height: 31,
 top: 1312,
 right: 1306.5,
 bottom: 1343,
 left: 604.875
}

說明：top是距離文檔頂部的距離，y則是距離可視窗口（瀏覽器屏幕）的頂部距離，如果瀏覽器滾動，top值不變，y值會變

兼容性

10、contains

可以判斷指定元素是否包含了指定的子元素：

<div>
 <p></p>
</div>

document.querySelector("div").contains(document.querySelector("p")); // true

兼容性

11、online state

是不是很想像APP一樣監聽當前網頁的網絡狀態變動，尤其是一些ERP，然後執行對應的方法：

window.addEventListener("online", xxx);
window.addEventListener("offline", () => {
 alert("你斷網啦！");
});

// addEventListener version
window.addEventListener('online', (event) => {
 console.log("You are now connected to the network.");
});
// ononline version
window.ononline = (event) => {
 console.log("You are now connected to the network.");
};

可以模擬看下效果

兼容性

12、battery state

獲取設備的電池狀態

This feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.

navigator.getBattery().then(battery => console.log(battery));

// 返回
{
 charging, // 是否在充電
 chargingTime, // 充滿電所需時間
 dischargingTime, // 當前電量可使用時間
 level, 剩餘電量
 onchargingchange, // 監聽充電狀態變化
 onchargingtimechange, // 監聽充滿電所需時間變化
 ondischargingtimechange, // 監聽當前電量可使用時間變化
 onlevelchange // 監聽電量變化
}

使用場景：提示用戶電量已充滿，或者為了讓用戶有安全感，電量低於15%的時候來個彈框提示需要保存某些重要操作，防止斷電帶來的不必要損失

兼容性

13、vibration

使設備進行震動，更貼近原生應用開發：

// 震動一次
navigator.vibrate(100);
// 連續震動，震動200ms、暫停100ms、震動300ms
navigator.vibrate([200, 100, 300]);
// vibrate for 200ms
navigator.vibrate(200); 
// Vibrate 'SOS' in Morse.
navigator.vibrate([100,30,100,30,100,30,200,30,200,30,200,30,100,30,100,30,100]); 

使用場景：通過振動來提供感官反饋，比如太久沒有觸摸屏幕的時候連續震動提醒用戶

兼容性

14、page visibility

有沒有小夥伴發現做在線筆試的時候不允許隨意切換瀏覽器的tab，一旦隨意切換，就會彈出一個提示！！！嘿嘿，別問我怎麼知道的。

大家好不好奇，是如何監聽到頁面的變化？

page visibility顧名思義，這個API是用來監聽頁面可見性變化的，在PC端標籤欄切換、最小化會觸發、在移動端程序切到後臺會觸發，簡單說就是頁面消失了‍♂️

document.addEventListener("visibilitychange", () => {
 console.log(`頁面可見性：${document.visibilityState}`);
});

PC端效果如下

移動端效果如下

使用場景：當程序切到後臺的時候，如果當前有視頻播放或者一些動畫執行，可以先暫停

兼容性

15、deviceOrientation

陀螺儀，也就是設備的方向，又名重力感應，該API在IOS設備上失效的解決辦法，將域名協議改成https

從左到右分別為alpha、beta、gamma;

window.addEventListener("deviceorientation", event => {
 let {
 alpha,
 beta,
 gamma
 } = event;
 console.log(`alpha：${alpha}`);
 console.log(`beta：${beta}`);
 console.log(`gamma：${gamma}`);
});

移動端效果如下（此時手機在不停的轉動）

使用場景：頁面上的某些元素需要根據手機擺動進行移動，達到視差的效果，比如王者榮耀進入遊戲的那個界面，手機轉動背景圖會跟著動

兼容性

16、orientation

可以監聽用戶手機設備的旋轉方向變化；

 window.addEventListener("orientationchange", () => {
 document.body.innerHTML += `<p>屏幕旋轉後的角度值：${window.orientation}</p>`;
}, false);

效果如下：

也可以使用css的媒體查詢：

/* 豎屏時樣式 */
@media all and (orientation: portrait) {
 body::after {
 content: "豎屏"
 }
}
/* 橫屏時樣式 */
@media all and (orientation: landscape) {
 body::after {
 content: "橫屏"
 }
}

使用場景：頁面需要用戶開啟橫屏來獲得更好的體驗，主要用在PAD上開發類似ERP

兼容性

17、toDataURL

這個canvas的API，作用是將畫布的內容轉換成一個base64的圖片地址；

let canvas = document.querySelector("canvas");
let context = canvas.getContext("2d");
// 畫東西
...
let url = canvas.toDataURL("image/png"); // 將畫布內容轉換成base64地址

使用a標籤進行圖片下載時，圖片鏈接跨域（圖片是我的掘金頭像），無法進行下載而是進行圖片預覽

<img src="xxx">
<button>
 <a href="xxx" download="avatar">下載圖片</a>
</button>

效果如下：

封裝以下代碼便可解決

效果如下：

或者將當前的DOM轉換成圖片進行下載，常用於生成海報： 如html2canvas庫

兼容性

18、customEvent

自定義事件，就跟vue裡面的on跟emit一樣；

監聽自定義事件：

window.addEventListener("follow", event => {
 console.log(event.detail); // 輸出 {name: "前端宇宙情報局"}
});

派發自定義事件：

window.dispatchEvent(new CustomEvent("follow", {
 detail: {
 name: "前端宇宙情報局"
 }
}));

兼容性

19、notification

PC端的桌面通知，如網頁端的微信，當收到消息時，右下角會出現一個通知（儘管你把瀏覽器最小化），因為這個通知時獨立於瀏覽器的，是系統的一個原生控件；

注意：想要成功的調起通知，首先要用戶的授權

Notification.requestPermission(prem => {
 prem == "granted" // 同意
 prem == "denied" // 拒絕
})

所以，再調用之前先向用戶發起請求：

let permission = Notification.permission;
if (permission == "granted") {
 // 已同意，開始發送通知
 ...
} else if (permission == "denied") {
 // 不同意，發不了咯
} else {
 // 其他狀態，可以重新發送授權提示
 Notification.requestPermission();
}

有點醜哈，但是這是原生的！

兼容性

20、fullScreen

全屏不咯? 之前的一個項目剛好用上，不僅僅可以作用在documentElement上，還可以作用在指定元素；

/**
 * @method launchFullScreen 開啟全屏
 * @param {Object} elem = document.documentElement 作用的元素
 */
const launchFullScreen = (elem = document.documentElement) => {
 if(elem.requestFullScreen) {
 elem.requestFullScreen();
 } else if(elem.mozRequestFullScreen) {
 elem.mozRequestFullScreen();
 } else if(elem.webkitRequestFullScreen) {
 elem.webkitRequestFullScreen();
 }
}

作用在documentElement上沒啥可以介紹的咯，就相當於F11開啟全屏：

"

程序猿就是一個活到老學到老的職業，如果你不想被淘汰，就得逼著自己去優秀。WEB技術隨著大潮發生了很多變化，尤其是2.0後時代階段，Ember、Angular、React、Vue的興起，極大的推動了WEB行業的變革。大多數的人開始被分成兩大組——使用框架和制定框架，人們越來越喜歡拿來即用的東西，卻很容易忽略箱子裡面的東西...

本期繼續分享DOM相關的一些小知識點，隨著HTML5時代的到來，WEB API迎來了一次較大範圍的更新，為WEB開發帶來了一些福利。新的API在現代的瀏覽器的支持下“表現得更優秀”，也加快了互聯網的發展。

1、querySelector和querySelectorAll

querySelector獲取指定元素中匹配css選擇器的元素；querySelectorAll獲取指定元素中匹配css選擇器的所有元素

注意：無論如何只返回一個元素，如果有多個素，那也只返回第一個；querySelectorAll返回的值是一個類數組，無法使用數組的原生方法（forEach、map等），需要轉換一下

Array.from(list).map();

兼容性

2、closest

跟querySelector相反，該元素可以向上查詢，也就是可以查詢到父元素

document.querySelector("li").closest("#nav");

其實類似於parentNode和parentElement，可以看看它的profill

兼容性

3、dataset

就跟原生微信小程序一樣，能獲取標籤上以"data-"為前綴的屬性集合：

<p data-name="蜘蛛俠" data-age="16"></p>

document.querySelector("p").dataset; // {name: "蜘蛛俠", age: "16"}

注意：雖然可以用getAttribute方法獲取任何屬性值，但是性質卻不一樣，這是開發規範問題，凡是自定義屬性都要加上data-前綴哦

兼容性

4、URLSearchParams

假設瀏覽器的url參數是 "?name=蜘蛛俠&age=16"，還記得我們是怎麼處理的嗎？

現在告訴大家一個新的API，這個使用就更方便了

new URLSearchParams(location.search).get("name"); // 蜘蛛俠

運行結果

URLSearchParams 接口定義了一些實用的方法來處理 URL 的查詢字符串

兼容性

5、hidden

這是一個html屬性，規定元素是否隱藏，表現跟css的display: none一致：

<div hidden>我被隱藏了</div>

document.querySelector("div").hidden = true / false;

現在我們操作dom的顯示與隱藏也可以像JQuery一樣方便啦

兼容性

6、contenteditable

可以使一個元素可以被用戶編輯：

<p contenteditable>我是P元素，但是我也可以被編輯</p>
複製代碼

效果如下：

很多簡單的editor就是基於此屬性實現的，功能比textarea更強大，容錯也更好

兼容性

7、speelcheck

也是一個html屬性，規定輸入的內容是否檢查英文的拼寫（像不像Office裡面的拼寫檢查）

<!-- 默認就是true，可省略 -->
<textarea spellcheck="true"></textarea>

效果如下：

設置不檢查：

<textarea spellcheck="false"></textarea>

效果如下：

兼容性

8、classList

大家還記得JQuery時代前操作原生JS操作class的痛苦吧，需要單獨封裝一個工具庫

現在提供的classList是一個對象，該對象裡封裝了許多操作元素類名的方法：

兼容性

9、getBoundingClientRect（這個不是新的，但是大多數人沒怎麼用過）

可以獲取指定元素在當前頁面的空間信息：

elem.getBoundingClientRect();

// 返回
{
 x: 604.875,
 y: 1312,
 width: 701.625,
 height: 31,
 top: 1312,
 right: 1306.5,
 bottom: 1343,
 left: 604.875
}

說明：top是距離文檔頂部的距離，y則是距離可視窗口（瀏覽器屏幕）的頂部距離，如果瀏覽器滾動，top值不變，y值會變

兼容性

10、contains

可以判斷指定元素是否包含了指定的子元素：

<div>
 <p></p>
</div>

document.querySelector("div").contains(document.querySelector("p")); // true

兼容性

11、online state

是不是很想像APP一樣監聽當前網頁的網絡狀態變動，尤其是一些ERP，然後執行對應的方法：

window.addEventListener("online", xxx);
window.addEventListener("offline", () => {
 alert("你斷網啦！");
});

// addEventListener version
window.addEventListener('online', (event) => {
 console.log("You are now connected to the network.");
});
// ononline version
window.ononline = (event) => {
 console.log("You are now connected to the network.");
};

可以模擬看下效果

兼容性

12、battery state

獲取設備的電池狀態

This feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.

navigator.getBattery().then(battery => console.log(battery));

// 返回
{
 charging, // 是否在充電
 chargingTime, // 充滿電所需時間
 dischargingTime, // 當前電量可使用時間
 level, 剩餘電量
 onchargingchange, // 監聽充電狀態變化
 onchargingtimechange, // 監聽充滿電所需時間變化
 ondischargingtimechange, // 監聽當前電量可使用時間變化
 onlevelchange // 監聽電量變化
}

使用場景：提示用戶電量已充滿，或者為了讓用戶有安全感，電量低於15%的時候來個彈框提示需要保存某些重要操作，防止斷電帶來的不必要損失

兼容性

13、vibration

使設備進行震動，更貼近原生應用開發：

// 震動一次
navigator.vibrate(100);
// 連續震動，震動200ms、暫停100ms、震動300ms
navigator.vibrate([200, 100, 300]);
// vibrate for 200ms
navigator.vibrate(200); 
// Vibrate 'SOS' in Morse.
navigator.vibrate([100,30,100,30,100,30,200,30,200,30,200,30,100,30,100,30,100]); 

使用場景：通過振動來提供感官反饋，比如太久沒有觸摸屏幕的時候連續震動提醒用戶

兼容性

14、page visibility

有沒有小夥伴發現做在線筆試的時候不允許隨意切換瀏覽器的tab，一旦隨意切換，就會彈出一個提示！！！嘿嘿，別問我怎麼知道的。

大家好不好奇，是如何監聽到頁面的變化？

page visibility顧名思義，這個API是用來監聽頁面可見性變化的，在PC端標籤欄切換、最小化會觸發、在移動端程序切到後臺會觸發，簡單說就是頁面消失了‍♂️

document.addEventListener("visibilitychange", () => {
 console.log(`頁面可見性：${document.visibilityState}`);
});

PC端效果如下

移動端效果如下

使用場景：當程序切到後臺的時候，如果當前有視頻播放或者一些動畫執行，可以先暫停

兼容性

15、deviceOrientation

陀螺儀，也就是設備的方向，又名重力感應，該API在IOS設備上失效的解決辦法，將域名協議改成https

從左到右分別為alpha、beta、gamma;

window.addEventListener("deviceorientation", event => {
 let {
 alpha,
 beta,
 gamma
 } = event;
 console.log(`alpha：${alpha}`);
 console.log(`beta：${beta}`);
 console.log(`gamma：${gamma}`);
});

移動端效果如下（此時手機在不停的轉動）

使用場景：頁面上的某些元素需要根據手機擺動進行移動，達到視差的效果，比如王者榮耀進入遊戲的那個界面，手機轉動背景圖會跟著動

兼容性

16、orientation

可以監聽用戶手機設備的旋轉方向變化；

 window.addEventListener("orientationchange", () => {
 document.body.innerHTML += `<p>屏幕旋轉後的角度值：${window.orientation}</p>`;
}, false);

效果如下：

也可以使用css的媒體查詢：

/* 豎屏時樣式 */
@media all and (orientation: portrait) {
 body::after {
 content: "豎屏"
 }
}
/* 橫屏時樣式 */
@media all and (orientation: landscape) {
 body::after {
 content: "橫屏"
 }
}

使用場景：頁面需要用戶開啟橫屏來獲得更好的體驗，主要用在PAD上開發類似ERP

兼容性

17、toDataURL

這個canvas的API，作用是將畫布的內容轉換成一個base64的圖片地址；

let canvas = document.querySelector("canvas");
let context = canvas.getContext("2d");
// 畫東西
...
let url = canvas.toDataURL("image/png"); // 將畫布內容轉換成base64地址

使用a標籤進行圖片下載時，圖片鏈接跨域（圖片是我的掘金頭像），無法進行下載而是進行圖片預覽

<img src="xxx">
<button>
 <a href="xxx" download="avatar">下載圖片</a>
</button>

效果如下：

封裝以下代碼便可解決

效果如下：

或者將當前的DOM轉換成圖片進行下載，常用於生成海報： 如html2canvas庫

兼容性

18、customEvent

自定義事件，就跟vue裡面的on跟emit一樣；

監聽自定義事件：

window.addEventListener("follow", event => {
 console.log(event.detail); // 輸出 {name: "前端宇宙情報局"}
});

派發自定義事件：

window.dispatchEvent(new CustomEvent("follow", {
 detail: {
 name: "前端宇宙情報局"
 }
}));

兼容性

19、notification

PC端的桌面通知，如網頁端的微信，當收到消息時，右下角會出現一個通知（儘管你把瀏覽器最小化），因為這個通知時獨立於瀏覽器的，是系統的一個原生控件；

注意：想要成功的調起通知，首先要用戶的授權

Notification.requestPermission(prem => {
 prem == "granted" // 同意
 prem == "denied" // 拒絕
})

所以，再調用之前先向用戶發起請求：

let permission = Notification.permission;
if (permission == "granted") {
 // 已同意，開始發送通知
 ...
} else if (permission == "denied") {
 // 不同意，發不了咯
} else {
 // 其他狀態，可以重新發送授權提示
 Notification.requestPermission();
}

有點醜哈，但是這是原生的！

兼容性

20、fullScreen

全屏不咯? 之前的一個項目剛好用上，不僅僅可以作用在documentElement上，還可以作用在指定元素；

/**
 * @method launchFullScreen 開啟全屏
 * @param {Object} elem = document.documentElement 作用的元素
 */
const launchFullScreen = (elem = document.documentElement) => {
 if(elem.requestFullScreen) {
 elem.requestFullScreen();
 } else if(elem.mozRequestFullScreen) {
 elem.mozRequestFullScreen();
 } else if(elem.webkitRequestFullScreen) {
 elem.webkitRequestFullScreen();
 }
}

作用在documentElement上沒啥可以介紹的咯，就相當於F11開啟全屏：

那麼作用在指定元素會是什麼效果呢?

"

程序猿就是一個活到老學到老的職業，如果你不想被淘汰，就得逼著自己去優秀。WEB技術隨著大潮發生了很多變化，尤其是2.0後時代階段，Ember、Angular、React、Vue的興起，極大的推動了WEB行業的變革。大多數的人開始被分成兩大組——使用框架和制定框架，人們越來越喜歡拿來即用的東西，卻很容易忽略箱子裡面的東西...

本期繼續分享DOM相關的一些小知識點，隨著HTML5時代的到來，WEB API迎來了一次較大範圍的更新，為WEB開發帶來了一些福利。新的API在現代的瀏覽器的支持下“表現得更優秀”，也加快了互聯網的發展。

1、querySelector和querySelectorAll

querySelector獲取指定元素中匹配css選擇器的元素；querySelectorAll獲取指定元素中匹配css選擇器的所有元素

注意：無論如何只返回一個元素，如果有多個素，那也只返回第一個；querySelectorAll返回的值是一個類數組，無法使用數組的原生方法（forEach、map等），需要轉換一下

Array.from(list).map();

兼容性

2、closest

跟querySelector相反，該元素可以向上查詢，也就是可以查詢到父元素

document.querySelector("li").closest("#nav");

其實類似於parentNode和parentElement，可以看看它的profill

兼容性

3、dataset

就跟原生微信小程序一樣，能獲取標籤上以"data-"為前綴的屬性集合：

<p data-name="蜘蛛俠" data-age="16"></p>

document.querySelector("p").dataset; // {name: "蜘蛛俠", age: "16"}

注意：雖然可以用getAttribute方法獲取任何屬性值，但是性質卻不一樣，這是開發規範問題，凡是自定義屬性都要加上data-前綴哦

兼容性

4、URLSearchParams

假設瀏覽器的url參數是 "?name=蜘蛛俠&age=16"，還記得我們是怎麼處理的嗎？

現在告訴大家一個新的API，這個使用就更方便了

new URLSearchParams(location.search).get("name"); // 蜘蛛俠

運行結果

URLSearchParams 接口定義了一些實用的方法來處理 URL 的查詢字符串

兼容性

5、hidden

這是一個html屬性，規定元素是否隱藏，表現跟css的display: none一致：

<div hidden>我被隱藏了</div>

document.querySelector("div").hidden = true / false;

現在我們操作dom的顯示與隱藏也可以像JQuery一樣方便啦

兼容性

6、contenteditable

可以使一個元素可以被用戶編輯：

<p contenteditable>我是P元素，但是我也可以被編輯</p>
複製代碼

效果如下：

很多簡單的editor就是基於此屬性實現的，功能比textarea更強大，容錯也更好

兼容性

7、speelcheck

也是一個html屬性，規定輸入的內容是否檢查英文的拼寫（像不像Office裡面的拼寫檢查）

<!-- 默認就是true，可省略 -->
<textarea spellcheck="true"></textarea>

效果如下：

設置不檢查：

<textarea spellcheck="false"></textarea>

效果如下：

兼容性

8、classList

大家還記得JQuery時代前操作原生JS操作class的痛苦吧，需要單獨封裝一個工具庫

現在提供的classList是一個對象，該對象裡封裝了許多操作元素類名的方法：

兼容性

9、getBoundingClientRect（這個不是新的，但是大多數人沒怎麼用過）

可以獲取指定元素在當前頁面的空間信息：

elem.getBoundingClientRect();

// 返回
{
 x: 604.875,
 y: 1312,
 width: 701.625,
 height: 31,
 top: 1312,
 right: 1306.5,
 bottom: 1343,
 left: 604.875
}

說明：top是距離文檔頂部的距離，y則是距離可視窗口（瀏覽器屏幕）的頂部距離，如果瀏覽器滾動，top值不變，y值會變

兼容性

10、contains

可以判斷指定元素是否包含了指定的子元素：

<div>
 <p></p>
</div>

document.querySelector("div").contains(document.querySelector("p")); // true

兼容性

11、online state

是不是很想像APP一樣監聽當前網頁的網絡狀態變動，尤其是一些ERP，然後執行對應的方法：

window.addEventListener("online", xxx);
window.addEventListener("offline", () => {
 alert("你斷網啦！");
});

// addEventListener version
window.addEventListener('online', (event) => {
 console.log("You are now connected to the network.");
});
// ononline version
window.ononline = (event) => {
 console.log("You are now connected to the network.");
};

可以模擬看下效果

兼容性

12、battery state

獲取設備的電池狀態

This feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.

navigator.getBattery().then(battery => console.log(battery));

// 返回
{
 charging, // 是否在充電
 chargingTime, // 充滿電所需時間
 dischargingTime, // 當前電量可使用時間
 level, 剩餘電量
 onchargingchange, // 監聽充電狀態變化
 onchargingtimechange, // 監聽充滿電所需時間變化
 ondischargingtimechange, // 監聽當前電量可使用時間變化
 onlevelchange // 監聽電量變化
}

使用場景：提示用戶電量已充滿，或者為了讓用戶有安全感，電量低於15%的時候來個彈框提示需要保存某些重要操作，防止斷電帶來的不必要損失

兼容性

13、vibration

使設備進行震動，更貼近原生應用開發：

// 震動一次
navigator.vibrate(100);
// 連續震動，震動200ms、暫停100ms、震動300ms
navigator.vibrate([200, 100, 300]);
// vibrate for 200ms
navigator.vibrate(200); 
// Vibrate 'SOS' in Morse.
navigator.vibrate([100,30,100,30,100,30,200,30,200,30,200,30,100,30,100,30,100]); 

使用場景：通過振動來提供感官反饋，比如太久沒有觸摸屏幕的時候連續震動提醒用戶

兼容性

14、page visibility

有沒有小夥伴發現做在線筆試的時候不允許隨意切換瀏覽器的tab，一旦隨意切換，就會彈出一個提示！！！嘿嘿，別問我怎麼知道的。

大家好不好奇，是如何監聽到頁面的變化？

page visibility顧名思義，這個API是用來監聽頁面可見性變化的，在PC端標籤欄切換、最小化會觸發、在移動端程序切到後臺會觸發，簡單說就是頁面消失了‍♂️

document.addEventListener("visibilitychange", () => {
 console.log(`頁面可見性：${document.visibilityState}`);
});

PC端效果如下

移動端效果如下

使用場景：當程序切到後臺的時候，如果當前有視頻播放或者一些動畫執行，可以先暫停

兼容性

15、deviceOrientation

陀螺儀，也就是設備的方向，又名重力感應，該API在IOS設備上失效的解決辦法，將域名協議改成https

從左到右分別為alpha、beta、gamma;

window.addEventListener("deviceorientation", event => {
 let {
 alpha,
 beta,
 gamma
 } = event;
 console.log(`alpha：${alpha}`);
 console.log(`beta：${beta}`);
 console.log(`gamma：${gamma}`);
});

移動端效果如下（此時手機在不停的轉動）

使用場景：頁面上的某些元素需要根據手機擺動進行移動，達到視差的效果，比如王者榮耀進入遊戲的那個界面，手機轉動背景圖會跟著動

兼容性

16、orientation

可以監聽用戶手機設備的旋轉方向變化；

 window.addEventListener("orientationchange", () => {
 document.body.innerHTML += `<p>屏幕旋轉後的角度值：${window.orientation}</p>`;
}, false);

效果如下：

也可以使用css的媒體查詢：

/* 豎屏時樣式 */
@media all and (orientation: portrait) {
 body::after {
 content: "豎屏"
 }
}
/* 橫屏時樣式 */
@media all and (orientation: landscape) {
 body::after {
 content: "橫屏"
 }
}

使用場景：頁面需要用戶開啟橫屏來獲得更好的體驗，主要用在PAD上開發類似ERP

兼容性

17、toDataURL

這個canvas的API，作用是將畫布的內容轉換成一個base64的圖片地址；

let canvas = document.querySelector("canvas");
let context = canvas.getContext("2d");
// 畫東西
...
let url = canvas.toDataURL("image/png"); // 將畫布內容轉換成base64地址

使用a標籤進行圖片下載時，圖片鏈接跨域（圖片是我的掘金頭像），無法進行下載而是進行圖片預覽

<img src="xxx">
<button>
 <a href="xxx" download="avatar">下載圖片</a>
</button>

效果如下：

封裝以下代碼便可解決

效果如下：

或者將當前的DOM轉換成圖片進行下載，常用於生成海報： 如html2canvas庫

兼容性

18、customEvent

自定義事件，就跟vue裡面的on跟emit一樣；

監聽自定義事件：

window.addEventListener("follow", event => {
 console.log(event.detail); // 輸出 {name: "前端宇宙情報局"}
});

派發自定義事件：

window.dispatchEvent(new CustomEvent("follow", {
 detail: {
 name: "前端宇宙情報局"
 }
}));

兼容性

19、notification

PC端的桌面通知，如網頁端的微信，當收到消息時，右下角會出現一個通知（儘管你把瀏覽器最小化），因為這個通知時獨立於瀏覽器的，是系統的一個原生控件；

注意：想要成功的調起通知，首先要用戶的授權

Notification.requestPermission(prem => {
 prem == "granted" // 同意
 prem == "denied" // 拒絕
})

所以，再調用之前先向用戶發起請求：

let permission = Notification.permission;
if (permission == "granted") {
 // 已同意，開始發送通知
 ...
} else if (permission == "denied") {
 // 不同意，發不了咯
} else {
 // 其他狀態，可以重新發送授權提示
 Notification.requestPermission();
}

有點醜哈，但是這是原生的！

兼容性

20、fullScreen

全屏不咯? 之前的一個項目剛好用上，不僅僅可以作用在documentElement上，還可以作用在指定元素；

/**
 * @method launchFullScreen 開啟全屏
 * @param {Object} elem = document.documentElement 作用的元素
 */
const launchFullScreen = (elem = document.documentElement) => {
 if(elem.requestFullScreen) {
 elem.requestFullScreen();
 } else if(elem.mozRequestFullScreen) {
 elem.mozRequestFullScreen();
 } else if(elem.webkitRequestFullScreen) {
 elem.webkitRequestFullScreen();
 }
}

作用在documentElement上沒啥可以介紹的咯，就相當於F11開啟全屏：

那麼作用在指定元素會是什麼效果呢?

就像效果圖一樣，會直接開啟全屏，並且只顯示指定的元素，元素的寬高填充了整個屏幕✅

關閉全屏的時候需要注意的是，統一用document對象

/**
 * @method exitFullScreen 關閉全屏
 */
const exitFullScreen = () => {
 if (document.exitFullscreen) {
 document.exitFullscreen();
 } else if (document.mozCancelFullScreen) {
 document.mozCancelFullScreen();
 } else if (document.webkitCancelFullScreen) {
 document.webkitCancelFullScreen();
 }
}

使用場景：需要讓用戶專注去做某件事，比如代碼編輯區的全屏或者是ERP管理系統

兼容性

"

程序猿就是一個活到老學到老的職業，如果你不想被淘汰，就得逼著自己去優秀。WEB技術隨著大潮發生了很多變化，尤其是2.0後時代階段，Ember、Angular、React、Vue的興起，極大的推動了WEB行業的變革。大多數的人開始被分成兩大組——使用框架和制定框架，人們越來越喜歡拿來即用的東西，卻很容易忽略箱子裡面的東西...

本期繼續分享DOM相關的一些小知識點，隨著HTML5時代的到來，WEB API迎來了一次較大範圍的更新，為WEB開發帶來了一些福利。新的API在現代的瀏覽器的支持下“表現得更優秀”，也加快了互聯網的發展。

1、querySelector和querySelectorAll

querySelector獲取指定元素中匹配css選擇器的元素；querySelectorAll獲取指定元素中匹配css選擇器的所有元素

注意：無論如何只返回一個元素，如果有多個素，那也只返回第一個；querySelectorAll返回的值是一個類數組，無法使用數組的原生方法（forEach、map等），需要轉換一下

Array.from(list).map();

兼容性

2、closest

跟querySelector相反，該元素可以向上查詢，也就是可以查詢到父元素

document.querySelector("li").closest("#nav");

其實類似於parentNode和parentElement，可以看看它的profill

兼容性

3、dataset

就跟原生微信小程序一樣，能獲取標籤上以"data-"為前綴的屬性集合：

<p data-name="蜘蛛俠" data-age="16"></p>

document.querySelector("p").dataset; // {name: "蜘蛛俠", age: "16"}

注意：雖然可以用getAttribute方法獲取任何屬性值，但是性質卻不一樣，這是開發規範問題，凡是自定義屬性都要加上data-前綴哦

兼容性

4、URLSearchParams

假設瀏覽器的url參數是 "?name=蜘蛛俠&age=16"，還記得我們是怎麼處理的嗎？

現在告訴大家一個新的API，這個使用就更方便了

new URLSearchParams(location.search).get("name"); // 蜘蛛俠

運行結果

URLSearchParams 接口定義了一些實用的方法來處理 URL 的查詢字符串

兼容性

5、hidden

這是一個html屬性，規定元素是否隱藏，表現跟css的display: none一致：

<div hidden>我被隱藏了</div>

document.querySelector("div").hidden = true / false;

現在我們操作dom的顯示與隱藏也可以像JQuery一樣方便啦

兼容性

6、contenteditable

可以使一個元素可以被用戶編輯：

<p contenteditable>我是P元素，但是我也可以被編輯</p>
複製代碼

效果如下：

很多簡單的editor就是基於此屬性實現的，功能比textarea更強大，容錯也更好

兼容性

7、speelcheck

也是一個html屬性，規定輸入的內容是否檢查英文的拼寫（像不像Office裡面的拼寫檢查）

<!-- 默認就是true，可省略 -->
<textarea spellcheck="true"></textarea>

效果如下：

設置不檢查：

<textarea spellcheck="false"></textarea>

效果如下：

兼容性

8、classList

大家還記得JQuery時代前操作原生JS操作class的痛苦吧，需要單獨封裝一個工具庫

現在提供的classList是一個對象，該對象裡封裝了許多操作元素類名的方法：

兼容性

9、getBoundingClientRect（這個不是新的，但是大多數人沒怎麼用過）

可以獲取指定元素在當前頁面的空間信息：

elem.getBoundingClientRect();

// 返回
{
 x: 604.875,
 y: 1312,
 width: 701.625,
 height: 31,
 top: 1312,
 right: 1306.5,
 bottom: 1343,
 left: 604.875
}

說明：top是距離文檔頂部的距離，y則是距離可視窗口（瀏覽器屏幕）的頂部距離，如果瀏覽器滾動，top值不變，y值會變

兼容性

10、contains

可以判斷指定元素是否包含了指定的子元素：

<div>
 <p></p>
</div>

document.querySelector("div").contains(document.querySelector("p")); // true

兼容性

11、online state

是不是很想像APP一樣監聽當前網頁的網絡狀態變動，尤其是一些ERP，然後執行對應的方法：

window.addEventListener("online", xxx);
window.addEventListener("offline", () => {
 alert("你斷網啦！");
});

// addEventListener version
window.addEventListener('online', (event) => {
 console.log("You are now connected to the network.");
});
// ononline version
window.ononline = (event) => {
 console.log("You are now connected to the network.");
};

可以模擬看下效果

兼容性

12、battery state

獲取設備的電池狀態

This feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.

navigator.getBattery().then(battery => console.log(battery));

// 返回
{
 charging, // 是否在充電
 chargingTime, // 充滿電所需時間
 dischargingTime, // 當前電量可使用時間
 level, 剩餘電量
 onchargingchange, // 監聽充電狀態變化
 onchargingtimechange, // 監聽充滿電所需時間變化
 ondischargingtimechange, // 監聽當前電量可使用時間變化
 onlevelchange // 監聽電量變化
}

使用場景：提示用戶電量已充滿，或者為了讓用戶有安全感，電量低於15%的時候來個彈框提示需要保存某些重要操作，防止斷電帶來的不必要損失

兼容性

13、vibration

使設備進行震動，更貼近原生應用開發：

// 震動一次
navigator.vibrate(100);
// 連續震動，震動200ms、暫停100ms、震動300ms
navigator.vibrate([200, 100, 300]);
// vibrate for 200ms
navigator.vibrate(200); 
// Vibrate 'SOS' in Morse.
navigator.vibrate([100,30,100,30,100,30,200,30,200,30,200,30,100,30,100,30,100]); 

使用場景：通過振動來提供感官反饋，比如太久沒有觸摸屏幕的時候連續震動提醒用戶

兼容性

14、page visibility

有沒有小夥伴發現做在線筆試的時候不允許隨意切換瀏覽器的tab，一旦隨意切換，就會彈出一個提示！！！嘿嘿，別問我怎麼知道的。

大家好不好奇，是如何監聽到頁面的變化？

page visibility顧名思義，這個API是用來監聽頁面可見性變化的，在PC端標籤欄切換、最小化會觸發、在移動端程序切到後臺會觸發，簡單說就是頁面消失了‍♂️

document.addEventListener("visibilitychange", () => {
 console.log(`頁面可見性：${document.visibilityState}`);
});

PC端效果如下

移動端效果如下

使用場景：當程序切到後臺的時候，如果當前有視頻播放或者一些動畫執行，可以先暫停

兼容性

15、deviceOrientation

陀螺儀，也就是設備的方向，又名重力感應，該API在IOS設備上失效的解決辦法，將域名協議改成https

從左到右分別為alpha、beta、gamma;

window.addEventListener("deviceorientation", event => {
 let {
 alpha,
 beta,
 gamma
 } = event;
 console.log(`alpha：${alpha}`);
 console.log(`beta：${beta}`);
 console.log(`gamma：${gamma}`);
});

移動端效果如下（此時手機在不停的轉動）

使用場景：頁面上的某些元素需要根據手機擺動進行移動，達到視差的效果，比如王者榮耀進入遊戲的那個界面，手機轉動背景圖會跟著動

兼容性

16、orientation

可以監聽用戶手機設備的旋轉方向變化；

 window.addEventListener("orientationchange", () => {
 document.body.innerHTML += `<p>屏幕旋轉後的角度值：${window.orientation}</p>`;
}, false);

效果如下：

也可以使用css的媒體查詢：

/* 豎屏時樣式 */
@media all and (orientation: portrait) {
 body::after {
 content: "豎屏"
 }
}
/* 橫屏時樣式 */
@media all and (orientation: landscape) {
 body::after {
 content: "橫屏"
 }
}

使用場景：頁面需要用戶開啟橫屏來獲得更好的體驗，主要用在PAD上開發類似ERP

兼容性

17、toDataURL

這個canvas的API，作用是將畫布的內容轉換成一個base64的圖片地址；

let canvas = document.querySelector("canvas");
let context = canvas.getContext("2d");
// 畫東西
...
let url = canvas.toDataURL("image/png"); // 將畫布內容轉換成base64地址

使用a標籤進行圖片下載時，圖片鏈接跨域（圖片是我的掘金頭像），無法進行下載而是進行圖片預覽

<img src="xxx">
<button>
 <a href="xxx" download="avatar">下載圖片</a>
</button>

效果如下：

封裝以下代碼便可解決

效果如下：

或者將當前的DOM轉換成圖片進行下載，常用於生成海報： 如html2canvas庫

兼容性

18、customEvent

自定義事件，就跟vue裡面的on跟emit一樣；

監聽自定義事件：

window.addEventListener("follow", event => {
 console.log(event.detail); // 輸出 {name: "前端宇宙情報局"}
});

派發自定義事件：

window.dispatchEvent(new CustomEvent("follow", {
 detail: {
 name: "前端宇宙情報局"
 }
}));

兼容性

19、notification

PC端的桌面通知，如網頁端的微信，當收到消息時，右下角會出現一個通知（儘管你把瀏覽器最小化），因為這個通知時獨立於瀏覽器的，是系統的一個原生控件；

注意：想要成功的調起通知，首先要用戶的授權

Notification.requestPermission(prem => {
 prem == "granted" // 同意
 prem == "denied" // 拒絕
})

所以，再調用之前先向用戶發起請求：

let permission = Notification.permission;
if (permission == "granted") {
 // 已同意，開始發送通知
 ...
} else if (permission == "denied") {
 // 不同意，發不了咯
} else {
 // 其他狀態，可以重新發送授權提示
 Notification.requestPermission();
}

有點醜哈，但是這是原生的！

兼容性

20、fullScreen

全屏不咯? 之前的一個項目剛好用上，不僅僅可以作用在documentElement上，還可以作用在指定元素；

/**
 * @method launchFullScreen 開啟全屏
 * @param {Object} elem = document.documentElement 作用的元素
 */
const launchFullScreen = (elem = document.documentElement) => {
 if(elem.requestFullScreen) {
 elem.requestFullScreen();
 } else if(elem.mozRequestFullScreen) {
 elem.mozRequestFullScreen();
 } else if(elem.webkitRequestFullScreen) {
 elem.webkitRequestFullScreen();
 }
}

作用在documentElement上沒啥可以介紹的咯，就相當於F11開啟全屏：

那麼作用在指定元素會是什麼效果呢?

就像效果圖一樣，會直接開啟全屏，並且只顯示指定的元素，元素的寬高填充了整個屏幕✅

關閉全屏的時候需要注意的是，統一用document對象

/**
 * @method exitFullScreen 關閉全屏
 */
const exitFullScreen = () => {
 if (document.exitFullscreen) {
 document.exitFullscreen();
 } else if (document.mozCancelFullScreen) {
 document.mozCancelFullScreen();
 } else if (document.webkitCancelFullScreen) {
 document.webkitCancelFullScreen();
 }
}

使用場景：需要讓用戶專注去做某件事，比如代碼編輯區的全屏或者是ERP管理系統

兼容性

好啦，乾貨就到這裡啦，希望大家看完不要忘了

---

前端學習視頻傳送門

vue視頻教程來啦，每週末都有前端視頻教程學

微信小程序視頻教程來啦，每週末都有前端視頻教程學

vue視頻教程來啦，每週末送前端視頻教程，私信可得

從入門到精通實戰Go web編程視頻來啦，每週末都有前端視頻教程學

參考文章

https://juejin.im/post/5d5df391e51d453b1e478ad0?

https://developer.mozilla.org/en-US/docs/Web/API/Window/orientationchange_event

"

相關推薦

'一入樂高深似海，樂高星球大戰系列陪伴我們走過20週年'

"大家好吖一日不見如隔三秋，大家好！我是有夢想的騰騰。應粉絲要求測評兩款星球大戰套裝，安排！他們分別是樂高75049雪地飛行器與75259雪地飛行艇。名字十分相近的兩款套裝到底有什麼不同？哪個更有收藏價值？星戰場景之前真的是沒有接觸過這兩款套裝，也是粉絲提出建議後，騰騰才將...

樂高積木 星球大戰 文章 讓夢發生 收藏 飛艇 戰鬥機 2019-09-17

'“壯麗70年·奮鬥新時代”系列主題新聞發佈會宜陽專場舉行'

"9月12日上午10點30分，洛陽市人民政府新聞辦公室舉行“壯麗70年·奮鬥新時代”系列主題新聞發佈會宜陽專場，中共宜陽縣委書記安穎芳致發佈詞，縣委常委、常務副縣長曲萬濤，縣委常委、宣傳部部長朱丹，圍繞“富美宜陽更出彩 高質量發展再起航”介紹全縣經濟社會發展工作情況，並答記...

宜陽 歷史 青島 洛陽 經濟 文化 古縣 新聞 第二十二屆中國農加工投洽會 河南 錦屏 韓國 習近平 文章 召公奭 青島品牌日 詩經 農村 花果山 2019-09-16

'DODOWED婚禮手繪推薦系列之Face C設計工作室粉白色婚禮手繪圖'

"DODOWED，每天為你推薦國內優質婚禮手繪作品，今天給大家推薦的是來自Face C設計工作室的粉色白色婚禮設計作品文章轉載自匯聚全球好婚禮的DODOWED婚禮策劃網站www.dodowed.com"

設計 婚禮 文章 2019-09-16

'恆山文化研究系列文章之十二：千佛嶺鄉打虎溝村的傳說'

"千佛嶺鄉打虎溝村的傳說 在千佛嶺鄉的東部、鄰近二級公路大五線東，群山環抱著一個小山村，叫打虎溝村，山村周圍綠樹成蔭，地下煤炭儲量豐富，村民從明朝起世代居住，百姓豐衣足食，安居樂業，生活過得有滋有味。該村起名打虎溝村，和一個打虎的傳說有關係。據當地村民講，這個山村原來是一片...

恆山 渾源 明朝 朱元璋 龍山 山西 文化 虎 文章 移民 洪洞 農業 2019-09-14

'「媒體要聞」“四個革命、一個合作”能源安全新戰略的浙能實踐系列報道（一）'

"【能源人都在看，點擊右上角加“關注”】編者按2019年7月初，新華社、人民日報等播（刊）發了浙能集團黨委書記、董事長童亞輝的署名文章《習近平能源安全新戰略的浙江探索》。該文發表後，集團政治工作部（新聞中心）安排人員於7月25日至8月5日沿著習近平總書記調研浙能的足跡，深入...

能源 經濟 浙江省 投資 習近平 歷史 甌江 新聞 青田 人生第一份工作 政治 台州 人民日報 新華社 文章 長興 讓夢發生 景寧 2019-09-12

'NBA年鑑系列之1999-海軍上將圓夢，國王開啟夢幻時代'

"本文將繼續通過文章給大家帶來一系列2000年（含2000年）以前的NBA，希望能幫助大家更好地去回顧，去懷念上個世紀NBA的一些人和事。想要查看之前文章點擊關注進入”籃球過去式“主頁就能看到了NBA年鑑系列之1999-海軍上將圓夢，國王開啟夢幻時代！在1998-99賽季，...

薩克拉門託國王 越投入越精彩 紐約尼克斯 艾弗裡·約翰遜 猶他爵士 蒂姆·鄧肯 魔術師約翰遜 約翰·斯托克頓 聖安東尼奧馬刺 卡爾·安東尼·馬龍 喬·約翰遜 蒂姆·哈達威 邁阿密熱火 阿倫·艾弗森 皮特·馬拉維奇 大衛·羅賓遜 費城76人 賈森·威廉姆斯 海軍 弗拉德·迪瓦茨 芝加哥公牛 阿朗佐·莫寧 帕特·萊利 費城 邁阿密 拉里·休斯 克里斯·韋伯 邁克爾·喬丹 印第安納州 范甘迪 以賽亞·湯瑪斯 亞特蘭大 紐約 馬龍 讓夢發生 托特納姆熱刺足球俱樂部 文章 2019-09-12

'系列吐槽之五——索尼收購insomniac是帝國反擊戰的開始？'

"索尼終於出手了，在PS4時代四平八穩的索尼剛剛拋出大手筆將開發了《抵抗》《瑞奇與叮噹》《小龍斯派羅》和PS4獨佔大作《蜘蛛俠》的insomniac正式收歸旗下。官方宣佈！正式加入索尼大家庭本文說索尼實際上是吐槽微軟，微軟這個大巨頭仗著有錢初入遊戲界不是到處煽風點火買獨佔買...

索尼 PlayStation 微軟 Bungie 戰爭機器 任天堂 瑞奇與叮噹 光暈 蜘蛛俠 2019-09-09

'Kali系統中20個超好用黑客滲透工具，你知道幾個？'

"最近幾個月我在頭條分享了非常多的黑客入門教程，令人驚訝的是，有這麼多人對此感興趣。下面我整理列出了一些常用黑客工具，來滿足你的每一個需求。記住要保持道德！如果你想學習使用這些黑客軟件工具，購買下面的《Kali網絡滲透測試實踐》專欄，即可馬上開始學習。為了方便大家交流，我們...

黑客 掃描儀 瀏覽器 Wireshark Linux 電腦 UNIX Wi-Fi 操作系統 今日頭條 Gmail 2019-09-08

'Nature Milestones系列 | 微生物裡有大文章！抗生素困境'

"「編者按」Hi，歡迎回來。上一期我們通過對大事件的梳理解答了“細菌孤獨麼？“ 等問題。本期[人類微生物研究里程碑事件]將為大家奉上以下大事件：· 2006年 是誰調節了誰（II）？· 2006年 訓練你的「小夥伴」（II）· 2006年 攻防戰略· 2007年 聯合分析·...

心血管病 文章 大腸桿菌 糖尿病 遺傳 機器學習 吃在四海八方 巴爾幹半島 癌症 動物 2019-09-05

'Polkadot 系列談之十九丨在波卡上進行區塊鏈創業的 5 個經驗'

"作者 | Terry Teh來源 | PolkaWorldPolkadot 是被譽為“以太坊隱形大腦”的 Gavin Wood 領軍的項目，是 Web3.0 版圖上不可或缺的板塊。 Polkadaot 獨特的跨鏈機制旨在將當下各自獨立的區塊鏈網絡串聯起來，讓不同鏈間可以進...

區塊鏈 操作系統 創業 技術 Twitter GitHub 文章 人生第一份工作 墨爾本 新西蘭 通信 2019-09-04

'刺激戰場韓服指南之成就係列2'

"大家好，我是鬥鷹上一篇文章答應大家的這期要發下一個成就係統的講解，那麼本篇文章說的就是競賽成就係統，此篇文章較長，希望大家耐心看完。鬥鷹一字一敲完成的文章，喜歡作品別忘記收藏哦主圖第一個成就是（突擊隊）圖1/2圖1圖2任務分別為：1.用突擊步槍殺死10個敵人2.用突擊步槍...

刺激戰場 衝鋒槍 跳槽那些事兒 文章 2019-09-02

'Yahoo之NBA球星球星討論系列：保羅-加索爾vs馬努-吉諾比利'

"雖說成王敗寇是場上真刀真槍打出來的，但場外吃瓜群眾也少不了對究竟孰優孰劣津津樂道。我們樂於將我們喜愛的球員們互相比較，一屋子球迷可能永遠也不能一致同意誰才是GOAT（歷史最佳）。這一系列文章我們將嘗試做一些NBA球星對比——如果算不上定論也算是給各位球迷的討論提供素材了。...

保羅·加索爾 馬努·大衛·吉諾比利 越投入越精彩 保羅·皮爾斯 跳槽那些事兒 芝加哥公牛 克里斯·保羅 以賽亞·湯瑪斯 洛杉磯湖人 文斯·卡特 波特蘭開拓者 託尼·帕克 孟菲斯灰熊 雅虎 聖安東尼奧馬刺 勒布朗·詹姆斯 科比·布萊恩特 歷史 洛杉磯 蒂姆·鄧肯 德維恩·韋德 文章 芝加哥 德克·諾維茨基 2019-09-01

'和平精英：光子新出的訓練場加好友系統，是給你們用來拼團的嗎？'

"大家好，我是小魚乾。說實話小魚乾特別佩服一些玩家，實在是太有才，把小魚乾給整笑了。就比如前面小魚乾在一篇文章中介紹了刺激戰場國際服的新道具“速降尾跡”，可以在降落時施放彩色的煙霧，沒想到評論區有網友留言到，難道這就是“腳氣”？乍一看還真有點像，這看起來像紫色的煙霧，從人物...

Qjuediqiushengcijizhanchang 腳氣 文章 刺激戰場 2019-09-01

'波士頓諮詢“決勝未來十年”系列：競爭的新邏輯'

"21世紀的第一個十年見證了互聯網產業的爆發式發展。在短短十年間，中國的互聯網產業見證了曾經的門戶三巨頭快速上市又衰落，經歷了新三巨頭BAT（百度、阿里巴巴、騰訊）的崛起，迎來了以內容與知識付費、O2O、共享經濟、直播與短視頻等為代表的新商業模式的爆發。雲計算、大數據、區塊...

大數據 技術 今日頭條 算法 波士頓 騰訊 人工智能 Netflix 百度 經濟 文章 雲計算 無人駕駛 O2O 阿里巴巴集團 大眾汽車 區塊鏈 2019-08-30

'97集全套ps摳圖換背景視頻教程！零基礎小白系統學習教程'

"ps摳圖可以說是大多數人在ps上常用的，那麼，怎麼學會ps摳圖呢？ps摳圖又有多少種方法呢？今天小編就給大家分享一份全套ps摳圖換背景視頻教程！總共有97集+每一章節配套的練習素材！可謂是想你所想！非常的全面系統！下面我們看一下教程都有什麼？ps摳圖又有什麼方法？打開教程...

好好學習 Photoshop 美女 文章 貓 2019-08-30

'滴灌系統設計規劃全攻略，一篇文章教會你'

"滴灌系統的設計和安裝，需要考慮的因素眾多。一般根據田間需要倒著往回推，設計經濟合理實用的灌溉裝置。設計過程主要分為兩個階段，即設計參數及系統佈置。設計參數需要考慮因素有植物，土壤條件，地形，氣象，水源，供電，灌溉季節天數，日灌溉時段等因素。通過這些因素確定需水量，之後的步...

設計 農產品 文章 葡萄 氣象 2019-08-29

'挖一挖C#中那些我們不常用的東西之系列（5）——FlagAttribute'

" 說到FlagsAttribute，源自前幾天看到了一小段代碼，大概意思就是根據航班政策來返回哪些配送方式是否可用，根據這些是否可用來隱藏或者開啟界面的相關配送方式，如果大家訂過機票可能知道配送方式有很多種，比如“無需打印行程單（PJN）”，“機場自取(Airport)”...

EMS 編譯器 程序員 數學 2019-08-29

'香港十大奇案系列之康怡花園烹夫案'

"歡迎大家閱讀“景德鎮南河公安”頭條號。如果您喜歡本頭條號發佈的文章，還可點擊左上角關注我的頭條號，每天都有精彩文章推薦。香港十大奇案之所以被稱為“奇”，原因估計是這些案件的很多細節到今天還是個謎，比如說紙盒藏屍案的毆陽炳強到底是不是真凶？“雨夜屠夫”林過雲到底殺了多少人？...

翁靜晶 林過雲 香港 文章 不完美媽媽 精神病 安眠藥 新聞 傢俱 2019-08-28

'JavaScript系統學習DOM系列文章之DocumentFragment'

"引言：為什麼會把DocumentFragment與前端性能扯到一起，這是本篇文章給你的答案。我們經常使用javascript來操作DOM元素，比如使用appendChild()方法。每次調用該方法時，瀏覽器都會重新渲染頁面。如果大量的更新DOM節點，則會非常消耗性能，影響...

JavaScript 瀏覽器 HTML 文章 XHTML XML 2019-08-25

'陝西省舉辦慶祝新中國成立70週年系列新聞發佈會第五場：鄉村振興的渭南實踐'

"記者 杜麗芳 8月20日，陝西“奮力追趕超越慶祝新中國成立70週年”系列發佈會·渭南篇舉行，中共渭南市委書記魏建鋒，渭南市政府黨組成員、副市長楊武民介紹“鄉村振興的渭南實踐”情況並回答記者提問。 70年來，在黨的堅強領導下，渭南與時代同步、與祖國同行，在渭水河畔、華山腳下...

渭南 第二十二屆中國農加工投洽會 陝西 農村 經濟 文化 農民 新聞 農產品 合作社 習近平 跳槽那些事兒 蔬菜 文章 招聘 春節家書 2019-08-24

推薦中...