总结了工作中常用的 ES6 代码片段
1、如何隐藏所有指定元素?
1 2 3 4 | const hide = (...el) => [...el].forEach(e => (e.style.display = "none" )); // Example hide(document.querySelectorAll( "img" )); // 隐藏页面上所有<img />元素 |
2、如何确认元素是否具有指定的类?
1 2 3 4 | const hasClass = (el, className) => el.classList.contains(className); // Example hasClass(document.querySelector( "p.special" ), "special" ); // true |
3、如何切换元素的类?
1 2 3 4 | const toggleClass = (el, className) => el.classList.toggle(className); // Example toggleClass(document.querySelector( p.special ), special ); // 该段不再有 "special" 类 |
4、如何确认父元素是否包含子元素?
1 2 3 4 5 | const elementContains = (parent, child) => parent !== child && parent.contains(child); // Examples elementContains(document.querySelector( "head" ), document.querySelector( "title" )); // true elementContains(document.querySelector( "body" ), document.querySelector( "body" )); // false |
5、如何获取两个日期之间的天数间隔?
1 2 3 4 | const getDaysDiffBetweenDates = (dateInitial, dateFinal) => (dateFinal - dateInitial) / (1000 * 3600 * 24); // Example getDaysDiffBetweenDates( new Date( "2017-12-13" ), new Date( "2017-12-22" )); // 9 |
6、如何获取一个元素内的所有图像?
1 2 3 4 5 6 7 8 | const getImages = (el, includeDuplicates = false ) => { const images = [...el.getElementsByTagName( "img" )].map(img => img.getAttribute( "hide" )); return includeDuplicates ? images : [... new Set(images)]; }; // Examples getImages(document, true ); // ["image1.jpg", "image2.png", "image1.png", "..."] getImages(document, false ); // ["image1.jpg", "image2.png", "..."] |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 智能桌面机器人:用.NET IoT库控制舵机并多方法播放表情
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 手把手教你在本地部署DeepSeek R1,搭建web-ui ,建议收藏!
· 新年开篇:在本地部署DeepSeek大模型实现联网增强的AI应用
· 程序员常用高效实用工具推荐,办公效率提升利器!
· Janus Pro:DeepSeek 开源革新,多模态 AI 的未来
· 【译】WinForms:分析一下(我用 Visual Basic 写的)