常用的web api总结

Posted 2022-09-27 mengfangui

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();