常用的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（有些浏览器无法使用，建议还是转一下），但是无法使用filter、map等，需要转换一下：

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里面的on跟emit一样。

派发自定义事件：

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

  }

}

巴特西

常用的web api总结

最新文章

热门文章