前端这几个webApi你都知道吗

libin19890520 发布于2019-08-30 15:44 / 2413人阅读

摘要：跟相反，该元素可以向上查询，也就是可以查询到父元素就跟原生微信小程序一样，能获取标签上以为前缀的属性集合蜘蛛侠蜘蛛侠注意这是开发规范问题，凡是自定义属性都要加上前缀假设浏览器的参数是蜘蛛侠蜘蛛侠这是一个对象，该对象里封装了许多操作元

closest

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

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

dataset

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

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

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

URLSearchParams

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

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

classList

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

    
    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真的有用吗?，别问，问就是有用

云服务器 GPU云服务器快手移除粉丝对方知道吗这几年这几中这几天

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116354.html

作为开发人员，这四类Code Review方法你都知道吗？

摘要：类型瞬时的代码审查第一种类型是瞬时代码审查，它发生在结对编程的情景中。相同的专业水平考虑进行结对编程的另一个重要方面，是一起工作时，两个开发者的专业水平。让一个初级开发者和一个高级开发者进行结对编程，效果并不好。本文翻译自：https://dzone.com/articles/4-... 转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。没...

姘搁『 2019-05-29 17:07 评论0 收藏0
阿里巴巴2018秋招总结

摘要：作为一个前端人，阿里巴巴，是我最想去的国内公司，我看重的也不是他薪水如何，完全在于他的技术，这一点可以说明一切。阿里是个十分重视基础的公司，和浮躁的前端大环境形成鲜明的对比。我不是第一次投阿里巴巴，所以心态一开始还是挺平和的。这是去年8月份秋招的面试，五面都面完了，给大家贡献干货吧。我没写问题的答案，有什么问题可以留言区问我。一面电话面（1小时）电话面问题不多，但是十分考验对相关...

AWang 2019-08-02 16:05 评论0 收藏0
阿里巴巴2018秋招总结

摘要：作为一个前端人，阿里巴巴，是我最想去的国内公司，我看重的也不是他薪水如何，完全在于他的技术，这一点可以说明一切。阿里是个十分重视基础的公司，和浮躁的前端大环境形成鲜明的对比。我不是第一次投阿里巴巴，所以心态一开始还是挺平和的。这是去年8月份秋招的面试，五面都面完了，给大家贡献干货吧。我没写问题的答案，有什么问题可以留言区问我。一面电话面（1小时）电话面问题不多，但是十分考验对相关...

mj 2019-08-29 16:40 评论0 收藏0
阿里巴巴2018秋招总结

摘要：作为一个前端人，阿里巴巴，是我最想去的国内公司，我看重的也不是他薪水如何，完全在于他的技术，这一点可以说明一切。阿里是个十分重视基础的公司，和浮躁的前端大环境形成鲜明的对比。我不是第一次投阿里巴巴，所以心态一开始还是挺平和的。这是去年8月份秋招的面试，五面都面完了，给大家贡献干货吧。我没写问题的答案，有什么问题可以留言区问我。一面电话面（1小时）电话面问题不多，但是十分考验对相关...

yy13818512006 2019-08-23 11:52 评论0 收藏0