常用的web api总结
2021-02-05 05:15
标签：eth arc window web api add dde contains code 替换 1、querySelector 获取指定元素中匹配 2、querySelectorAll 获取指定元素中匹配 注意：返回的值是一个类数组，可以使用 3、dataset 获取标签上以" 4、URLSearchParams 获取url中查询参数 假设浏览器的url参数是 "?name=蜘蛛侠&age=16" 5、classList 操作dom的class 6、getBoundingClientRect 获取指定元素在当前页面的空间信息。 7、customEvent 自定义事件，就跟 派发自定义事件： 监听自定义事件： 8、fullScreen 全屏，不仅仅可以作用在 关闭全屏的时候需要注意的是，统一用 常用的web api总结 标签：eth arc window web api add dde contains code 替换 原文地址：https://www.cnblogs.com/mengfangui/p/11451778.htmlcss选择器的元素。// 作用在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
css选择器的所有元素：let list = document.querySelectorAll("li"); // NodeList(2) [li, li] 这里假设返回2个
forEach（有些浏览器无法使用，建议还是转一下），但是无法使用filter、map等，需要转换一下：Array.from(list).map();
data-"为前缀的属性集合：
document.querySelector("p").dataset; // {name: "蜘蛛侠", age: "16"}
new URLSearchParams(location.search).get("name"); // 蜘蛛侠
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
elem.getBoundingClientRect();
// 返回
{
x: 604.875,
y: 1312,
width: 701.625,
height: 31,
top: 1312,
right: 1306.5,
bottom: 1343,
left: 604.875
}
vue里面的on跟emit一样。window.dispatchEvent(new CustomEvent("follow", {
detail: {
name: "前端宇宙情报局"
}
}));
window.addEventListener("follow", event => {
console.log(event.detail); // 输出 {name: "前端宇宙情报局"}
});
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();
}
}