鏈€鎺ヨ繎鐨勬槸querySelector鐨勫弽闈€傝鍏冪礌鍙互鍚戜笂鏌ヨ锛屽嵆鍙互鏌ヨ鐖跺厓绱狅細document.querySelector("li").closest("#nav");涓庡師鐢熷井淇″皬绋嬪簭涓€鏍凤紝鏁版嵁闆嗗彲浠ヨ幏鍙栧埌浠モ€渄ata-鈥濅负鍓嶇紑鐨勫睘鎬ч泦鍚堬細
document.querySelector("p鈥滐級銆傛暟鎹泦锛?/{name:"SpiderXia",age:"16"}娉ㄦ剰锛氳繖鏄竴涓紑鍙戣鑼冮棶棰橈紝鎵€鏈夎嚜瀹氫箟灞炴€у繀椤讳互data涓哄墠缂€-URLSearchParams鍋囪娴忚鍣ㄧ殑url鍙傛暟涓衡€?name=Spiderman&age=16鈥?newURLSearchParams(location.search).get("name");//SpidermanclassList鏄竴涓璞★紝灏佽浜嗗緢澶氭搷浣滃厓绱犵被鍚嶇殑鏂规硶锛?pclass="title">letelem=document.querySelector("p");//娣诲姞绫诲悕elem.classList.add("title-new");//"titletitle-new"//鍒犻櫎绫诲悕elem.classList.remove("title");//"title-new"//鍒囨崲绫诲悕锛堟湁鍒欏垹闄わ紝娌℃湁鍒欐坊鍔狅紝甯哥敤浜庝竴浜涘垏鎹㈡搷浣滐紝濡傛樉绀?闅愯棌锛塭lem.classList.toggle("title");//"title-newtitle"//鏇挎崲绫诲悕elem.classList.replace("title","title-old");//"title-newtitle-old"//鏄惁鍖呭惈鎸囧畾绫诲悕elem.classList.contains("title");//falsegetBoundingClientRect鍙互鑾峰彇褰撳墠椤甸潰鎸囧畾鍏冪礌鐨勭┖闂翠俊鎭細elem.getBoundingClientRect();//return{x:604.875,y:1312,width:701.625,height:31,top:1312,right:1306.5,bottom:1343,left:604.875}notificationPC绔闈㈤€氱煡锛屽缃戦〉绔井淇ide,褰撴敹鍒版秷鎭椂锛屽彸涓嬭浼氬嚭鐜颁竴涓€氱煡锛堝嵆浣夸綘鏈€灏忓寲娴忚鍣級锛屽洜涓鸿繖涓€氱煡鏄嫭绔嬩簬娴忚鍣ㄧ殑锛屾槸绯荤粺鐨勫師鐢熸帶浠讹細constnotice=newNotification("鍓嶇瀹囧畽鎯呮姤灞€",{body:"杩?0涓笉甯哥敤鐨刉ebAPI鐪熺殑鏈夌敤鍚楋紵鍒棶锛岄棶灏辨湁鐢焾?,icon:"鎴戠殑澶村儚",data:{url:"https://www.baidu.com"}});//鐐瑰嚮鍥炶皟notice.onclick=()=>{window.open(notice.data.url);//褰撶敤鎴风偣鍑婚€氱煡鏃讹紝鍦ㄦ祻瑙堝櫒涓墦寮€鐧惧害缃戠珯}-Notification.requestPermission()娉ㄦ剰锛氫负浜嗘垚鍔熻皟鐢ㄩ€氱煡锛岄鍏堥渶瑕佺敤鎴锋巿鏉僋otification.requestPermission(prem=>{prem=="granted"//agreetoprem=="denied"//deny})鏈枃浠呭瓨涓哄娉紝鍐呭铏藉皯锛屽鏈変功鍐欎笂鐨勯棶棰橈紝璇锋寚鍑猴紝璋㈣阿銆傚鏋滆繖绡囨枃绔犺兘甯埌浣狅紝鎴戝緢楂樺叴
