前端這幾個webApi你都知道嗎

libin19890520 發布于2019-08-30 15:44 / 2414人閱讀

摘要：跟相反，該元素可以向上查詢，也就是可以查詢到父元素就跟原生微信小程序一樣，能獲取標簽上以為前綴的屬性集合蜘蛛俠蜘蛛俠注意這是開發規范問題，凡是自定義屬性都要加上前綴假設瀏覽器的參數是蜘蛛俠蜘蛛俠這是一個對象，該對象里封裝了許多操作元

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云服務器云服務器快手移除粉絲對方知道嗎這幾年這幾中這幾天

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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