JS手撕：DOM操作 浏览器API高频场景详解

在前端开发中我们经常会遇到一些重复且基础的需求——比如解析URL参数、给大量元素绑定点击事件、实现图片懒加载等。这些功能看似简单但写得不够严谨就容易出现bug比如中文参数乱码、事件绑定冗余、滚动加载卡顿。今天就整理了7个前端高频实用JS功能用“通俗话专业解析”的方式把每个功能的原理、代码细节和使用场景讲透还附上了可直接复制使用的优化版代码新手也能快速套用。一、URL参数解析把URL里的参数“拆”成可直接用的对象通俗解读我们经常会看到这样的URLhttps://xxx.com/list?page1size10keyword前端里面的page、size、keyword就是参数。这个功能就是把这些参数“拆出来”变成一个对象比如{page:1, size:10, keyword:“前端”}不用我们手动去切割字符串省心又不易错。专业解析核心利用浏览器原生的URL对象它能自动解析URL的协议http/https、主机xxx.com、路径/list和查询参数?后面的内容再配合URLSearchParams处理查询参数同时解决中文乱码用decodeURIComponent解码、空值、重复key、数字类型转换等常见问题。完整代码可直接复制functionparseParam(url){// 创建URL对象自动解析协议、域名、路径、参数原生API无需手动切割consturlObjnewURL(url);// 获取查询参数部分即?后面的内容不含?constqueryParamsnewURLSearchParams(urlObj.search);constparamsObj{};// 遍历所有查询参数处理各种边界情况for(let[key,value]ofqueryParams.entries()){// 空值处理如果参数值是空字符串或null统一赋值为true比如?flagnamexxxflag对应trueif(value||valuenull){paramsObj[key]true;}else{// 解码参数处理中文、特殊字符比如%E5%89%8D%E7%AB%AF解码为“前端”letvaldecodeURIComponent(value);// 纯数字字符串转为数字类型比如123转为123避免后续使用时还要手动转换val/^\d$/.test(val)?parseFloat(val):val;// 重复key处理如果参数有多个相同key比如?tagjstaghtml转为数组形式if(paramsObj.hasOwnProperty(key)){paramsObj[key][].concat(paramsObj[key],val);}else{paramsObj[key]val;}}}returnparamsObj;}// 示例使用consturlhttps://api.example.com/data?id123name张三page2tagjstaghtmlflag;constparamsparseParam(url);console.log(params);// 输出{id: 123, name: 张三, page: 2, tag: [js, html], flag: true}关键注意点URL对象是浏览器原生API无需引入第三方库兼容现代浏览器IE不支持需兼容IE可额外处理中文参数必须用decodeURIComponent解码因为URL中中文会被自动编码为%开头的字符重复key如?tagjstaghtml处理为数组避免后面的参数覆盖前面的。二、事件委托一次绑定搞定所有子元素的事件通俗解读如果页面有100个按钮给每个按钮都绑定点击事件会占用很多内存而且新增按钮还得重新绑定。事件委托就是“找一个父容器”只给父容器绑定一次事件不管里面有多少个子元素哪怕是后来新增的点击子元素时都会触发父容器的事件再通过判断点击的是哪个子元素执行对应逻辑。专业解析利用DOM事件的“冒泡机制”子元素的事件会向上传递给父元素将事件绑定在父容器上通过event.target获取真正被点击的子元素再通过matches()方法匹配目标元素选择器实现“一次绑定多元素复用”优化性能并简化代码。完整代码可直接复制/** * 事件委托代理 * param {string} eventType 事件类型 click/input 等比如click、input * param {string|Element} elDelegate 委托父元素选择器字符串或DOM对象 * param {string} selector 真正要触发的目标元素选择器比如#btn、.item * param {Function} fn 触发的回调函数this指向目标元素 */functionon(eventType,elDelegate,selector,fn){// 1. 处理委托父元素如果传入的是选择器字符串自动转为DOM对象if(!(elDelegateinstanceofElement)typeofelDelegatestring){elDelegatedocument.querySelector(elDelegate);}// 安全判断如果没找到父元素直接退出避免报错if(!elDelegate)returnnull;// 2. 给父元素绑定事件利用事件冒泡机制elDelegate.addEventListener(eventType,(e){letele.target;// 真正被点击/触发的元素子元素// 3. 向上查找匹配selector的元素防止点击的是子元素的子节点while(el!el.matches(selector)){if(elelDelegate){// 查到委托父元素还没匹配到说明不是目标元素停止查找elnull;break;}elel.parentNode;// 向上查找父级节点}// 4. 如果找到目标元素执行回调this指向目标元素elfn.call(el,e,el);});returnelDelegate;}// HTML示例/* */// 示例使用1单个目标元素on(click,#box,#btn,function(e,el){console.log(点击成功);console.log(this);// this 指向 #btn目标元素console.log(el);// el 也是目标元素和this一致});// 示例使用2多个目标元素.itemon(click,#box,.item,function(e,el){console.log(点击了item按钮,el.innerText);});关键注意点委托父元素必须是目标元素的祖先节点比如按钮的父div、body、document不要阻止事件冒泡e.stopPropagation()否则事件无法传递到父元素委托失效新增的子元素比如通过JS动态添加的按钮无需重新绑定事件会自动触发委托的事件。三、滚动加载滚动到底部自动加载更多内容通俗解读我们刷朋友圈、逛电商列表时往下滚动页面到底部后会自动加载更多内容这就是滚动加载。核心就是“判断页面是否滚动到底部”如果到了就执行加载数据的逻辑。专业解析通过监听window的scroll事件获取三个关键高度可视区域高度屏幕能看到的页面高度、滚动条已滚动距离、页面总高度包括看不见的部分。核心判断公式可视区域高度 已滚动距离 ≥ 页面总高度满足该条件即表示滚动到底部。完整代码可直接复制// 监听滚动事件window.addEventListener(scroll,function(){// 1. 可视区域高度屏幕能看到的高度不同设备可能不同constclientHeightdocument.documentElement.clientHeight;// 2. 滚动条卷上去的高度已滚动的距离兼容不同浏览器constscrollTopdocument.documentElement.scrollTop||document.body.scrollTop;// 3. 整个页面总高度包括看不见的部分即页面完整高度constscrollHeightdocument.documentElement.scrollHeight;// 核心判断可视高度 已滚动距离 ≥ 总高度 → 滚动到底部加10是为了提前加载优化体验if(clientHeightscrollTopscrollHeight-10){console.log(滚动到底部啦);// 这里写加载更多逻辑比如请求接口、渲染列表// loadMoreData(); // 假设这是加载更多数据的函数}},false);// 优化建议滚动事件会频繁触发可结合节流函数参考后面的图片懒加载避免性能消耗// 比如window.addEventListener(scroll, throttle(handleScroll, 300), false);关键注意点scroll事件会频繁触发滚动过程中每秒触发几十次建议结合节流函数后面会讲减少函数执行次数优化性能滚动到底部的判断可加一个小偏移量比如-10让加载提前触发避免用户看到底部空白再加载加载数据时建议添加“加载中”状态防止用户多次触发加载。四、图片懒加载减少页面加载时间提升体验通俗解读页面有很多图片时如果一打开就加载所有图片会导致页面加载变慢、卡顿。图片懒加载就是“只加载屏幕能看到的图片”用户往下滚动页面图片进入视野后再加载既节省带宽又提升页面加载速度。专业解析核心思路先给图片设置自定义属性比如data-src存储真实图片地址src属性设为占位图或空监听scroll事件判断图片是否进入可视区域若进入则将data-src的值赋给src实现图片加载。同时用节流函数限制scroll事件触发频率避免性能消耗。完整代码可直接复制// 节流函数限制函数在指定时间内只能执行一次优化scroll事件频繁触发functionthrottle(fn,delay){lettimernull;returnfunction(...args){if(!timer){fn.apply(this,args);// 执行函数timersetTimeout((){timernull;// 延迟后重置timer允许下次执行},delay);}};}// 图片懒加载核心函数functionlazyload(){constimgsdocument.getElementsByTagName(img);// 获取所有图片元素注意加s避免报错constviewHeightdocument.documentElement.clientHeight;// 可视区域高度// 滚动距离兼容不同浏览器constscrollTopdocument.documentElement.scrollTop||document.body.scrollTop;// 遍历所有图片判断是否进入可视区域for(leti0;iimgs.length;i){constimgimgs[i];constoffsetTopimg.offsetTop;// 图片到页面顶部的距离// 判断图片顶部距离 ≤ 可视区域高度 滚动距离 → 图片进入可视区域if(offsetTopviewHeightscrollTop){// 优化已经加载过的图片跳过避免重复赋值防止scroll事件重复触发导致的冗余操作if(img.srcimg.dataset.src)continue;// 开始加载图片将data-src真实地址赋给srcimg.srcimg.dataset.src;}}}// 监听scroll事件用节流函数限制触发频率300ms执行一次window.addEventListener(scroll,throttle(lazyload,300));// 页面刚打开时执行一次懒加载加载可视区域内的图片window.addEventListener(load,lazyload);// HTML示例/* !-- 占位图用1x1透明图或loading图片data-src存储真实图片地址 -- *关键注意点图片必须设置src属性可设为占位图否则会出现图片占位空白节流函数的延迟时间300ms可根据需求调整延迟太短达不到优化效果太长会影响体验页面加载完成后window.load必须执行一次lazyload避免可视区域内的图片无法加载。五、统计HTML页面标签快速了解页面结构通俗解读有时候我们需要知道一个页面用了多少种标签、每种标签用了多少次比如做页面优化、排查冗余标签这个功能就能自动统计不用手动一个个数还能按使用次数排序。专业解析利用document.getElementsByTagName(*)获取页面所有元素转为数组后提取每个元素的标签名用Set统计标签种类Set自动去重用reduce统计每种标签的数量最后用sort排序返回标签种类数和各标签数量从多到少。完整代码可直接复制functioncountTagsOnPage(){// 1. 获取页面所有元素*表示匹配所有标签constallTagsdocument.getElementsByTagName(*);// 2. 转为数组提取每个元素的标签名并转为大写统一格式避免div和DIV重复统计consttagNames[...allTags].map(elel.tagName.toUpperCase());// 3. 统计标签种类Set自动去重size就是种类数consttotalTagTypesnewSet(tagNames).size;// 4. 统计每种标签的数量用reduce累加consttagCounttagNames.reduce((acc,tag){acc[tag](acc[tag]||0)1;// 有则加1无则初始化为1returnacc;},{});// 5. 按标签数量从多到少排序将对象转为数组再排序constsortedObject.entries(tagCount).sort((a,b)b[1]-a[1]);// 返回统计结果标签种类数、排序后的标签数量return{totalTagTypes,tagCounts:sorted};}// 使用并打印结果constrescountTagsOnPage();console.log(页面标签种类,res.totalTagTypes);console.log(各标签数量从多到少,res.tagCounts);// 示例输出// 页面标签种类8// 各标签数量从多到少[[DIV, 12], [SPAN, 8], [IMG, 5], [BUTTON, 3], ...]关键注意点tagName返回的是大写标签名比如div返回DIV统一转为大写可避免大小写重复统计document.getElementsByTagName(‘*’)会获取所有元素包括head、body、script等隐藏元素若需统计可见元素可添加筛选条件排序后的结果是二维数组每个元素的第一个值是标签名第二个值是数量。六、点击打印HTML标签名快速定位元素标签通俗解读开发时我们经常需要知道点击的元素是什么标签比如排查样式问题、调试事件绑定这个功能就是“点击页面任意元素自动打印该元素的标签名”不用手动去开发者工具里查看。专业解析利用事件委托前面讲过的知识点在document上绑定一次click事件通过event.target获取被点击的具体元素再用tagName获取该元素的标签名最后用console.log打印也可改为弹窗显示。完整代码可直接复制// 利用事件委托在document上绑定一次click事件处理所有元素的点击document.addEventListener(click,function(event){// event.target 指向被点击的具体元素最底层子元素constclickedElementevent.target;// 获取标签名tagName返回大写形式如DIV、SPAN、IMGconsttagNameclickedElement.tagName;// 打印标签名默认控制台打印可改为弹窗console.log(点击的元素标签名${tagName});// 如需弹窗显示可取消下面这行的注释// alert(点击的元素标签名${tagName});});// 示例点击页面上的div、span、按钮控制台会分别打印 DIV、SPAN、BUTTON关键注意点点击的是元素的子节点比如span里的文本event.target会指向文本节点的父元素span不影响标签名获取可根据需求修改打印方式控制台打印/弹窗弹窗适合非开发环境快速查看若只想打印特定元素的标签名可添加筛选条件比如只打印按钮标签if(tagName ‘BUTTON’) { … }。七、模拟JSONP解决跨域请求问题通俗解读前端请求接口时经常会遇到“跨域”报错比如前端域名是a.com接口域名是b.comJSONP是一种简单的跨域解决方案。核心就是“通过创建script标签加载接口地址利用script标签不受跨域限制的特性获取后端返回的数据”。注意结合你提供的报错信息link hit security strategy链接触发安全策略若使用JSONP时出现该报错大概率是后端接口的安全策略限制了该请求比如不允许JSONP请求、域名白名单限制需联系后端调整安全策略。专业解析JSONP的核心原理script标签的src属性不受同源策略限制可加载任意域名的资源。前端生成唯一回调函数名拼接在接口URL中后端接收请求后返回“回调函数名(数据)”的格式前端通过全局回调函数接收并处理后端返回的数据最后删除临时创建的script标签和全局函数避免冗余。完整代码可直接复制functionJSONP(url,_params{}){// 1. 生成唯一回调函数名防止多个JSONP请求冲突默认用jsonp_时间戳constcallbackName_params.callback||jsonp_Date.now();// 2. 处理请求参数排除callback因为要单独拼接constparams[];for(letkeyin_params){if(key!callback){// 编码参数值处理中文/特殊字符params.push(${key}${encodeURIComponent(_params[key])});}}// 3. 拼接callback参数JSONP核心后端会根据该参数返回对应的回调函数调用params.push(callback${callbackName});// 4. 创建script标签用于加载接口script不受跨域限制constscriptdocument.createElement(script);// 拼接接口URL和参数url?key1value1key2value2callbackxxxscript.src${url}?${params.join()};// 5. 返回Promise方便用then/catch处理结果returnnewPromise((resolve,reject){// 6. 挂载全局回调函数必须在script加载前定义否则后端返回时函数还不存在window[callbackName](result){try{resolve(result);// 成功将后端返回的数据传入resolve}catch(err){reject(err);// 失败捕获异常并传入reject}finally{// 7. 清理工作删除script标签和全局回调函数避免内存泄漏document.body.removeChild(script);deletewindow[callbackName];}};// 8. 处理脚本加载失败比如网络错误、接口不存在script.onerror(){reject(newError(JSONP 请求失败));// 失败也需要清理document.body.removeChild(script);deletewindow[callbackName];};// 9. 把script插入页面最后执行确保回调函数已定义document.body.appendChild(script);});}// 示例使用结合你提供的URLJSONP(https://api.example.com/data,{id:123,callback:getData// 可选指定后端约定的回调名不指定则自动生成}).then(res{console.log(拿到数据,res);}).catch(err{console.log(出错,err);// 若出现 link hit security strategy 报错需检查后端安全策略});// 后端返回格式必须是回调函数调用的形式// getData({ name: 张三, id: 123 })// 前端会通过window.getData接收该数据并传入then的回调函数关键注意点JSONP只支持GET请求不支持POST请求因为script标签的src只能发起GET请求回调函数名必须唯一避免多个JSONP请求冲突代码中用时间戳保证唯一性若出现link hit security strategy报错不是前端代码问题而是后端接口的安全策略限制了该JSONP请求需联系后端调整比如添加前端域名到白名单、允许JSONP请求请求完成后必须清理script标签和全局函数避免内存泄漏。总结以上7个JS功能覆盖了前端开发中URL处理、事件绑定、性能优化、跨域请求等高频场景代码均经过优化可直接复制到项目中使用。重点提醒使用JSONP时若遇到link hit security strategy报错需排查后端安全策略而非前端代码另外事件绑定和滚动相关功能建议结合节流函数优化性能避免频繁触发函数导致页面卡顿。