前端这几个webApi你都知道吗

2024年5月27日 159次阅读 来源: lskwordserver

closest

跟querySelector相反，该元素可以向上查询，也就是可以查询到父元素：
    document.querySelector("li").closest("#nav");

dataset

就跟原生微信小程序一样，能获取标签上以”data-“为前缀的属性集合：

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

注意：这是开发规范问题，凡是自定义属性都要加上data-前缀

URLSearchParams

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

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

classList

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

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

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()
    注意：想要成功的调起通知，首先要用户的授权
    Notification.requestPermission(prem => {
      prem == "granted" // 同意
      prem == "denied" // 拒绝
    })
 此文章只作为笔记储存，内容虽少，编写如有问题，还请指出来，谢谢。
 如果此文章能帮助到你，那就是我的荣幸了
    原文作者：lskwordserver
    原文地址: https://segmentfault.com/a/1190000020216026
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞