經常使用的web api總結

一、querySelector

獲取指定元素中匹配css選擇器的元素。

// 做用在document
document.querySelector("#nav"); // 獲取文檔中id="nav"的元素
document.querySelector(".nav"); // 獲取文檔中class="nav"的元素
document.querySelector("#nav li:first-child"); // 獲取文檔中id="nav"下面的第一個li元素

// 也能夠做用在其餘元素
let nav = document.querySelector("#nav"); nav.querySelector("li"); // 若是有多個li的話，返回第一個li

二、querySelectorAll

獲取指定元素中匹配css選擇器的全部元素：

let list = document.querySelectorAll("li");  // NodeList(2) [li, li] 這裏假設返回2個

注意：返回的值是一個類數組，可使用forEach（有些瀏覽器沒法使用，建議仍是轉一下），可是沒法使用filter、map等，須要轉換一下：

Array.from(list).map();

三、dataset

獲取標籤上以"data-"爲前綴的屬性集合：

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

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

四、URLSearchParams

獲取url中查詢參數

假設瀏覽器的url參數是 "?name=蜘蛛俠&age=16"

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

五、classList

操做dom的class

<p class="title"></p>

let elem = document.querySelector("p"); // 增長類名
elem.classList.add("title-new"); // "title title-new"

// 刪除類名
elem.classList.remove("title"); // "title-new"

// 切換類名（有則刪、無則增，經常使用於一些切換操做，如顯示/隱藏）
elem.classList.toggle("title"); // "title-new title"

// 替換類名
elem.classList.replace("title", "title-old"); // "title-new title-old"

// 是否包含指定類名
elem.classList.contains("title"); // false

六、getBoundingClientRect

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

elem.getBoundingClientRect(); // 返回
{ x: 604.875, y: 1312, width: 701.625, height: 31, top: 1312, right: 1306.5, bottom: 1343, left: 604.875 }

七、customEvent

自定義事件，就跟vue裏面的on跟emit同樣。

派發自定義事件：

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

監聽自定義事件：

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

八、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(); } }

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

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