声明

本文部分内容参考自各大技术社区，信息经过本人测试、修改。仅用于个人记录学习，同时方便日后查阅。 如有侵权，深感抱歉，请联系我 <xurenda@qq.com> 删除。

以下贴出参考资源信息：

文章：这些 Web API 真的有用吗? 别问，问就是有用作者：聪明的汤姆链接：https://juejin.im/post/5d5df391e51d453b1e478ad0 来源：掘金著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

正文

DOM 操作

elem.querySelector()

作用：
	获取DOM元素
 
语法：
	elem.querySelector('cssSelector')
		- elem					DOM元素
		- cssSelector		CSS选择器
 
返回：
	匹配的第一个DOM元素
 
示例：
	document.querySelector("#nav li:first-child")
 
	const navDOM = dodocument.querySelector("ul.nav")
	navDOM.querySelector("li")

elem.querySelectorAll()

与 querySelector 用法相同，区别是：return 所有匹配的 DOM 元素

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

const lis = querySelectorAll("li")
Array.from(lis).map(...)

elem.closest()

跟 querySelector 相反，该元素可以向上查询，也就是可以查询到父元素：

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

返回的是一个 DOM 元素，因为父元素只有一个

elem.contains(elem)

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

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

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

elem.dataset

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

<p data-name="zs" data-age="16"></p>

document.querySelector("p").dataset // {name: "zs", age: "16"}

注意：虽然可以用 getAttribute 方法获取任何属性值，但是性质却不一样，这是开发规范问题，凡是自定义属性都要加上 data- 前缀哦

elem.classList

这是一个对象，该对象里封装了许多操作元素类名的方法：

// 增加类名
elem.classList.add("newClassName")
// 删除类名
elem.classList.remove("className")
// 切换类名（有则删、无则增）
elem.classList.toggle("className")
// 替换类名
elem.classList.replace("oldClassName", "newClassName")
// 是否包含指定类名
elem.classList.contains("className") // true | false

elem.getBoundingClientRect()

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

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

注意：document.getBoundingClientRect()：Uncaught TypeError: document.getBoundingClientRect is not a function

HTML 属性

hidden

规定元素是否隐藏，表现和 css 的 display: none 一致：

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

document.querySelector("div").hidden = true | false

contenteditable

可以使一个元素可被用户编辑：

<p contenteditable>我是P元素，但是我也可以被编辑</p>

效果如下：

如果这个属性跟style标签相遇会产生一段非常奇妙的故事： contenteditable 跟 user-modify 还能这么玩 🌚

spellcheck

笔者测试无效： Google Chrome 77.0.3865.90（正式版本）（64 位）

规定输入的内容是否检查英文的拼写：

<textarea spellcheck></textarea>

效果如下：设置不检查：

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

效果如下：

系统资源

online state

监听当前的网络状态变动，然后执行对应的方法：

// 获取网络状态
navigator.onLine // true | false
 
// 监控网络变化
window.addEventListener('online', () => alert("你连网啦！"))
window.addEventListener('offline', () => alert("你断网啦！"))

PC 端效果如下：

移动端效果如下：

battery state

获取设备的电池状态：

navigator.getBattery().then(battery => console.log(battery))
 
// 返回
{
  charging, // 是否在充电
  chargingTime, // 充满电所需时间
  dischargingTime, // 当前电量可使用时间
  level, 剩余电量
  onchargingchange, // 监听充电状态变化
  onchargingtimechange, // 监听充满电所需时间变化
  ondischargingtimechange, // 监听当前电量可使用时间变化
  onlevelchange // 监听电量变化
}

notification

PC 端的桌面通知，如网页端的微信，当收到消息时，右下角会出现一个通知（尽管你把浏览器最小化），因为这个通知时独立于浏览器的，是系统的一个原生控件；

const notice = new Notification("前端宇宙情报局", {
  body: "这20个不常用的Web API真的有用吗?，别问，问就是有用🈶",
  icon: "我的掘金头像",
  data: {
    url: "https://www.baidu.com"
  }
})
// 点击回调
notice.onclick = () => {
  window.open(notice.data.url) // 当用户点击通知时，在浏览器打开百度网站
}

效果如下：注意：想要成功的调起通知，首先要用户的授权

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

所以，再调用之前先向用户发起请求：

let permission = Notification.permission
if (permission == "granted") {
  // 已同意，开始发送通知
  ...
} else if (permission == "denied") {
  // 不同意，发不了咯
} else {
  // 其他状态，可以重新发送授权提示
  Notification.requestPermission()
}

vibration

使设备进行震动：

// 震动一次，震动100ms
navigator.vibrate(100)
 
// 连续震动，震动200ms、暂停100ms、震动300ms
navigator.vibrate([200, 100, 300])

deviceOrientation

陀螺仪，也就是设备的方向，又名重力感应，该 API 在 IOS 设备上失效的解决办法，将域名协议改成 https；从左到右分别为 alpha、beta、gamma;

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

移动端效果如下（此时手机在不停的转动）：使用场景：页面上的某些元素需要根据手机摆动进行移动，达到视差的效果，比如王者荣耀进入游戏的那个界面，手机转动背景图会跟着动

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: "横屏"
  }
}

使用场景：页面需要用户开启横屏来获得更好的体验，如王者荣耀里面的活动页

page visibility

用来监听页面可见性变化的，在PC端标签栏切换、最小化会触发、在移动端程序切到后台会触发，简单说就是页面消失了

document.addEventListener("visibilitychange", () => {
  console.log(`页面可见性：${document.visibilityState}`) // hidden | visible
})

PC 端效果如下：移动端效果如下：使用场景：当程序切到后台的时候，如果当前有视频播放或者一些动画执行，可以先暂停

customEvent

自定义事件，就跟 vue 里面的 on 和 emit 一样；
派发自定义事件：

window.dispatchEvent(new CustomEvent('follow', {
  detail: {
    name: "zs"
  }
}))

监听自定义事件：

window.addEventListener('follow', event => {
  console.log(event.detail) // {name: "zs"}
})

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

使用场景：需要让用户专注去做某件事，比如代码编辑区的全屏

URLSearchParams

假设浏览器的 url 参数是 ?name=zs&age=16

new URLSearchParams(location.search).has("id") // false
new URLSearchParams(location.search).get("name") // zs

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>

效果如下：封装以下代码便可解决：

const downloadImage = (url, name) => {
  // 实例化画布
  let canvas = document.createElement("canvas")
  let context = canvas.getContext("2d")
  // 实例化一个图片对象
  let image = new Image()
  image.crossOrigin = "Anonymous"
  image.src = url
  // 当图片加载完毕
  image.onload = () => {
    // 将图片画在画布上
    canvas.height = image.height
    canvas.width = image.width
    context.drawImage(image, 0, 0)
    // 将画布的内容转换成base64地址
    let dataURL = canvas.toDataURL("image/png")
    // 创建a标签模拟点击进行下载
    let a = document.createElement("a")
    a.hidden = true
    a.href = dataURL
    a.download = name
    document.body.appendChild(a)
    a.click()
  }
}

效果如下：或者将当前的 DOM 转换成图片进行下载，常用于生成海报： html2canvas

My-Notes

全部文章

001.Web API

声明

正文