分享几个有趣的Web Api

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

这是个标题

需求搞完了当然是美滋滋了，趁着后端还在继续，有个空档期，就去看看了自己记录的未读清单，发现我收藏的一篇关于分享Web api的文章，这里就简单的和大家分享一下。

closet 向上查询

closest

相信大家对JavaScript的元素获取document.getElementById, getElementsByClassName 这些已经很熟悉，之后的版本中也更新了querySelector,querySelectorAll等。

但这几个都是向下选取的，这里说个向上的， closet()选取方式跟querySelector相反，该元素可以向上查询，也就是可以查询到父元素：

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

URLSearchParams

获取特定的url参数，在使用vue的时候，可以通过this.$router.query.params获取参数，但是纯JavaScript之前的做法大多是手动写个函数获取，而这一波，则是通过一个自带的方法直接获取指定参数，假设浏览器的url参数是 "?name=蜘蛛侠&age=16"：

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

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值会变

fullScreen

字面意思是全屏，但是区别f11的页面全部全屏，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();
  }
}