这是从30 seconds of code中挑出来的非常有用的一些代码片段，这是一个非常棒的项目，大家可以去github上去搜索一下，给个star。
在本文中，我试图根据它们的实际用途对它们进行分类，回答您在项目中可能遇到的常见问题：
1.如何隐藏指定的所有元素？
const hide = (...el) => [...el].forEach(e => (e.style.display = 'none')); // Example hide(document.querySelectorAll('img')); // Hides all <img> elements on the page
2.如何检查元素是否具有指定的类？
const hasClass = (el, className) => el.classList.contains(className); // Example hasClass(document.querySelector('p.special'), 'special'); // true
3.如何为元素切换类？
const toggleClass = (el, className) => el.classList.toggle(className); // Example toggleClass(document.querySelector('p.special'), 'special'); // The paragraph will not have the 'special' class anymore
这里使用了classList.toggle()方法
toggle( String [, force] )
当只有一个参数时：切换类值；也就是说，即如果类值存在，则删除它并返回 false，如果不存在，则添加它并返回 true。
当存在第二个参数时：若第二个参数的执行结果为 true，则添加指定的类值，若执行结果为 false，则删除它。
4.如何获取当前页面的滚动位置?
const getScrollPosition = (el = window) => ({ x: el.pageXOffset !== undefined ? el.pageXOffset : el.scrollLeft, y: el.pageYOffset !== undefined ? el.pageYOffset : el.scrollTop }); // Example getScrollPosition(); // {x: 0, y: 200}
5.如何平滑滚动到页面顶部?
const scrollToTop = () => { const c = document.documentElement.scrollTop || document.body.scrollTop; if (c > 0) { window.requestAnimationFrame(scrollToTop); window.scrollTo(0, c - c / 8); } }; // Example scrollToTop();
递归的方法不断调用使用scrollToTop()，requestAnimationFrame方法告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。它的回调函数执行次数通常与浏览器屏幕刷新次数相匹配，所以效果会比较平滑。
获取当前页面滚动条纵坐标的位置：document.body.scrollTop与document.documentElement.scrollTop
获取当前页面滚动条横坐标的位置：document.body.scrollLeft与document.documentElement.scrollLeft
6.如何检查父元素是否包含子元素？
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
7.如何检查指定的元素在视口中是否可见？
const elementIsVisibleInViewport = (el, partiallyVisible = false) => { const { top, left, bottom, right } = el.getBoundingClientRect(); const { innerHeight, innerWidth } = window; return partiallyVisible ? ((top > 0 && top < innerHeight) || (bottom > 0 && bottom < innerHeight)) && ((left > 0 && left < innerWidth) || (right > 0 && right < innerWidth)) : top >= 0 && left >= 0 && bottom <= innerHeight && right <= innerWidth; }; // Examples elementIsVisibleInViewport(el); // (not fully visible) elementIsVisibleInViewport(el, true); // (partially visible)
传入partiallyVisible参数，区分判断是是部分可见还是全部可见。
Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置。
8.如何获取元素中的所有图像？
const getImages = (el, includeDuplicates = false) => { const images = [...el.getElementsByTagName('img')].map(img => img.getAttribute('src')); return includeDuplicates ? images : [...new Set(images)]; }; // Examples getImages(document, true); // ['image1.jpg', 'image2.png', 'image1.png', '...'] getImages(document, false); // ['image1.jpg', 'image2.png', '...']
9.如何确定设备是移动设备还是台式机/笔记本电脑？
const detectDeviceType = () => /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ? 'Mobile' : 'Desktop'; // Example detectDeviceType(); // "Mobile" or "Desktop"
10.如何获取当前URL
const currentURL = () => window.location.href; // Example currentURL(); // 'https://google.com'
11.如何创建包含当前URL参数的对象？