当前位置： 首页 > Web前端 > HTML5

这些不常用的Web API真的有用吗- 别问，问就是有用-

时间：2023-04-05 16:27:46 HTML5

这些不常用的WebAPI真的有用吗？不问，只问。你可以自己查一下。下面的案例我会尽量配上动图，以免内容枯燥乏味，不过如果内容有误，还请大家喷一下或指正一下好吗？方法列表querySelector(元素向下查询，返回一个)querySelectorAll(元素向下查询，返回多个)closest(元素向上查询)dataset(获取前缀为“data-”的元素的属性集合)URLSearchParams(查询参数)hidden(隐藏元素)contenteditable(使元素被编辑)spellCheck(检查拼音)classList(类名控制器)getBoundingClientRect(元素空间结构详情)contains(判断是否包含指定元素)onlinestate(网络状态)batterystate(电池状态)vibration(devicevibration)pagevisibility(页面可见性)deviceOrientation(陀螺仪)toDataUrl(canvas内容转base64)customEvent(自定义事件)notification(桌面通知)fullScreen(全屏)orientation(屏幕方向)逐个分解选择器的元素://作用于documentdocument.querySelector("#nav");//获取文档中id="nav"的元素document.querySelector(".nav");//获取文档中的class="nav"元素document.querySelector("#navli:first-child");//获取文档中id="nav"下的第一个li元素//也可以用在其他元素上letnav=dodocument.querySelector("#nav");nav.querySelector("li");//如果有多个li，返回最后一个li注意：无论如何，只返回一个元素，如果有多个元素，则只返回最后一个元素?2.querySelectorAll获取指定元素中匹配css选择器的所有元素：letlist=document.querySelectorAll("li");//NodeList(2)[li,li]假设返回2注意：返回值为类数组，不能使用数组的native方法（forEach、map等），需要转换：Array.from(list).map();3.closest与querySelector相反，可以向上查询元素，即可以查询父元素：document.querySelector("li").closest("#nav");4.数据集就像原生的微信小程序一样，可以获取标签上以“data-”为前缀的属性集合：

document.querySelector("p").数据集；//{name:"Spider-Man",age:"16"}注：虽然可以用getAttribute方法获取任意属性值，但性质不同。这是一个开发规范问题。所有自定义属性必须以数据为前缀-?5。URLSearchParams假设浏览器的url参数是"?name=Spiderman&age=16"newURLSearchParams(location.search).get("name");//蜘蛛侠6.hidden这是一个html属性，指定元素是否隐藏，其表现与css一致display:none:我是隐藏的
document.querySelector("div").hidden=true/false;7.contenteditable可以让一个元素可以被用户编辑：我是P元素，但是我也可以被编辑

效果如下：这个属性如果遇到style标签，就会有一个很精彩的故事:contenteditable和user-modify可以这样玩吗？8、speelcheck也是一个html属性，指定输入内容是否检查中文拼音：效果如下：设置不检查：效果如下：9.classList这是一个object，对象中封装了很多操作元素类名的方法：

letelem=document.querySelector("p");//添加类名elem.classList.add("新标题");//"titletitle-new"//删除类名elem.classList.remove("title");//"title-new"//切换类名（有则删，无则加，常用于一些切换操作，如显示/隐藏）elem.classList.toggle("title");//"title-newtitle"//替换类名elem.classList.replace("title","title-old");//"title-newtitle-old"//是否包含指定类名elem.classList.contains("title");//错误10。getBoundingClientRect可以获取指定元素在当前页面的空间信息：elem.getBoundingClientRect();//return{x:604.875,y:1312,width:701.625,height:31,top:1312,right:1306.5,bottom:1343,left:604.875}注：top是距文档顶部的距离，y是可见距离窗口（浏览器屏幕）的顶部距离，如果浏览器滚动，top值保持不变，而y值会改变?11.contains可以判断指定元素是否包含指定子元素：

document.querySelector("div").contains(document.querySelector("p"));//真12。onlinestate监听当前网络状态的变化，然后执行相应的方法：window.addEventListener("online",xxx);window.addEventListener("offline",()=>{alert("您已断开网络连接！");});PC端效果如下：移动端效果如下：场景：提示用户已断网，直接用弹框吓唬用户?13.batterystate获取设备的电池状态：navigator.getBattery()//监听充电状态的变化onchargingtimechange,//监听充满电所需时间的变化ondischargingtimechange,//监听可用时间的变化currentbatteryonlevelchange//监听电量的变化}使用场景：提醒用户电池已充满，或者为了让用户放心，当电量低于99%时，会弹框提示“是时候充电了”?14.振动嘻嘻，让设备振动：//振动一次navigator.vibrate(100);//持续振动，振动200ms，暂停100ms，振动300msnavigator.vibrate([200,100,300]);效果如下：不好意思，你得自己拿着手机感受一下；使用场景：通过震动提供感官反馈，比如长时间没有触摸屏幕不断震动提醒用户?15.pagevisibility顾名思义，这个API是用来监控页面可见性变化的。PC端tabbar切换、最小化时触发，移动端程序切换到后台时触发。这也明白。页面消失了吗？?♂?document.addEventListener("visibilitychange",()=>{console.log(`Pagevisibility:${document.visibilityState}`);});PC端效果如下：移动端效果如下：场景：当程序切换到后台时，如果当前有视频播放或者一些动画执行，可以先暂停?16.deviceOrientationgyroscope，也就是设备的方向，也就是重力感应，这个API在IOS设备上失败的解决方法是把域名协议改成https；从左到右分别是alpha、beta、gamma；window.addEventListener("deviceorientation",event=>{let{alpha,beta,gamma}=event;console.log(`alpha:${alpha}`);console.log(`beta:${beta}`);console.log(`gamma:${gamma}`);});移动端效果如下（此时手机在不断旋转）：使用场景：页面中的一些元素需要根据手机的摆动来移动，以达到视差的效果。toDataURL，canvasAPI，用于将canvas的内容转换为base64图片地址；让canvas=document.querySelector("canvas");letcontext=canvas.getContext("2d");//画一些东西...leturl=canvas.toDataURL("image/png");//将画布内容转换为base64地址。使用a标签下载图片时，图片链接跨域（图片是我的掘金头像），无法下载。就是预览图片：效果如下：封装了下面的代码可以解决?constdownloadImage=(url,name)=>{//实例化画布letcanvas=document.createElement("canvas");让上下文=canvas.getContext("2d");//实例化一个图像对象让我法师=新图像（）；image.crossOrigin="匿名";图片.src=url;//当图像被加载时image.onload=()=>{//在画布上绘制图像canvas.height=image.高度;canvas.width=image.width;context.drawImage(图像,0,0);//将画布的内容转换为base64地址letdataURL=canvas.toDataURL("image/png");//创建标签模拟点击下载leta=document.createElement("a");a.隐藏=真；a.href=dataURL;a.下载=名称；文档.body.appendChild(a);a.点击（）；效果如下：或者将当前DOM转换成图片下载，常用来生成海报：html2canvas18。customEvent自定义事件，就像vue中的on和emit；监听自定义事件：window.addEventListener("follow",event=>{console.log(event.detail);//Output{name:"前端宇宙情报局"}});派发自定义事件：window.dispatchEvent(newCustomEvent("follow",{detail:{name:"前端宇宙情报局"}}));19.notificationPC端的桌面通知，比如网页端的微信，收到消息后，右下角会出现一个通知（即使你最小化浏览器），因为当这个通知是独立于浏览器，是系统的本机控件；constnotice=newNotification("前端宇宙情报局",{body:"这20个不常用的WebAPI真的有用吗？不问就问。？",icon:"我的掘金头像",data:{url:"https://www.baidu.com"}});//点击回调notice.onclick=()=>{window.open(notice.data.url);//当用户点击通知时，浏览器打开百度网站}，效果如下：注意：要成功调用通知，首先需要用户授权?Notification.requestPermission(prem=>{prem=="granted"//同意prem=="denied"//拒绝})因此，在调用之前向用户发出请求：letpermission=Notification.permission;if(permission=="granted"){//同意，开始发送通知...}elseif(permission=="denied"){//不同意，不能发帖}else{//在其他状态下，可以重发授权提示Notification.requestPermission();}20.FullScreen不是全屏吗？之前的一个项目刚好用到，不仅可以作用于documentElement，还可以作用于指定的元素；/***@methodlaunchFullScreen打开全屏*@param{Object}elem=document.documentElement的元素*/constlaunchFullScreen=(elem=document.documentElement)=>{if(elem.requestFullScreen){elem.requestFullScreen();}elseif(elem.mozRequestFullScreen){elem.mozRequestFullScreen();}elseif(elem.webkitRequestFullScreen){elem.webkitRequestFullScreen();可以介绍一下，相当于F11开启全屏：对指定元素会有什么影响？结果？和效果图一样，直接全屏打开，只显示指定的元素。元素的宽度和高度填满整个屏幕。关闭全屏时，需要注意统一使用document对象：/***@methodexitFullScreen关闭全屏*/constexitFullScreen=()=>{if(document.exitFullscreen){document.exitFullscreen();}elseif(document.mozCancelFullScreen){document.mozCancelFullScreen();}elseif(document.webkitCancelFullScreen)document.webkitCancelFullScreen();}}使用场景：需要让用户专注于做某事，比如代码编辑区全屏?21.orientation可以监测用户手机设备的旋转方向变化；window.addEventListener("orientationchange",()=>{document.body.innerHTML+=`

屏幕旋转后的角度值：${window.orientation}

`;},false);效果如下：也可以使用css媒体查询：/*Portraitstyle*/@mediaalland(orientation:portrait){body::after{content:"portrait"}}/*Landscapestyle*/@mediaalland(orientation:landscape){body::after{content:"横屏"}}使用场景：页面需要用户开启横屏才能获得更好的体验，比如荣耀中的活动页面国王？综上，不常用的有很多很多，有些是我没有找到或者没写的，比如geoLocation地理定位，execCommand执行命令等，也欢迎大家补充。前面几篇都是CSS相关的，后面几篇就不写CSS了。因为大家都写了很多内容，所以想写一些新的。可以，但是难免会有冲突~最后，本文到此结束。希望以上内容能对您有所帮助。喜欢的话记得点赞关注哦。微信公众号“前端宇宙情报局”会不定期更新最新实用的前端技巧/技术文章。欢迎关注，我会发表更多好文章回馈大家，互相鼓励！？

这些不常用的Web API真的有用吗- 别问，问就是有用-相关文章
最新推荐
猜你喜欢

Copyright © 2012-2022 程序源 版权所有豫ICP备2022028201号

重要申明：本站所有的文章、图片、评论等，均由网友发表或上传并维护或收集自网络，属个人行为，与本站立场无关。 如果侵犯了您的权利，请与我们联系，我们将在24小时内进行处理、任何非本站因素导致的法律后果，本站均不负任何责任。