打赏

常用的web api总结

1、querySelector

获取指定元素中匹配css选择器的元素。

// 作用在document
document.querySelector("#nav"); // 获取文档中id="nav"的元素
document.querySelector(".nav"); // 获取文档中class="nav"的元素
document.querySelector("#nav li:first-child"); // 获取文档中id="nav"下面的第一个li元素

// 也可以作用在其他元素
let nav = document.querySelector("#nav");
nav.querySelector("li"); // 如果有多个li的话,返回第一个li

2、querySelectorAll

获取指定元素中匹配css选择器的所有元素:

let list = document.querySelectorAll("li");  // NodeList(2) [li, li] 这里假设返回2个

注意:返回的值是一个类数组,可以使用forEach(有些浏览器无法使用,建议还是转一下),但是无法使用filtermap等,需要转换一下:

Array.from(list).map();

3、dataset

获取标签上以"data-"为前缀的属性集合:

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

4、URLSearchParams

获取url中查询参数

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

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

5、classList

操作dom的class

<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

6、getBoundingClientRect

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

elem.getBoundingClientRect();

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

7、customEvent

自定义事件,就跟vue里面的onemit一样。

派发自定义事件:

window.dispatchEvent(new CustomEvent("follow", {
  detail: {
    name: "前端宇宙情报局"
  }
}));

监听自定义事件:

window.addEventListener("follow", event => {
  console.log(event.detail); // 输出 {name: "前端宇宙情报局"}
});

8、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();
  }
}

关闭全屏的时候需要注意的是,统一用document对象:

/**
 * @method exitFullScreen 关闭全屏
 */
const exitFullScreen = () => {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if (document.webkitCancelFullScreen) {
    document.webkitCancelFullScreen();
  }
}

 

posted @ 2019-09-03 11:03  孟繁贵  阅读(558)  评论(0编辑  收藏  举报
TOP