常用的web api总结

1、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

2、querySelectorAll

获取指定元素中匹配css选择器的所有元素：

let list = document.querySelectorAll("li");  // NodeList(2) [li, li] 这里假设返回2个

注意：返回的值是一个类数组，可以使用forEach（有些浏览器无法使用，建议还是转一下），但是无法使用filter、map等，需要转换一下：

Array.from(list).map();

3、dataset

获取标签上以"data-"为前缀的属性集合：

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

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

4、URLSearchParams

获取url中查询参数

假设浏览器的url参数是 "?name=蜘蛛侠&age=16"

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

5、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

6、getBoundingClientRect

获取指定元素在当前页面的空间信息。

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

7、customEvent

自定义事件，就跟vue里面的on跟emit一样。

派发自定义事件：

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

监听自定义事件：

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

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