总结了工作中常用的 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", "..."]

  

  

 

 

 

posted on   明启心动  阅读(110)  评论(0编辑  收藏  举报

编辑推荐:
· 智能桌面机器人:用.NET IoT库控制舵机并多方法播放表情
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
阅读排行:
· 手把手教你在本地部署DeepSeek R1,搭建web-ui ,建议收藏!
· 新年开篇:在本地部署DeepSeek大模型实现联网增强的AI应用
· 程序员常用高效实用工具推荐,办公效率提升利器!
· Janus Pro:DeepSeek 开源革新,多模态 AI 的未来
· 【译】WinForms:分析一下(我用 Visual Basic 写的)
< 2025年1月 >
29 30 31 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31 1
2 3 4 5 6 7 8

导航

统计

点击右上角即可分享
微信分享提示