本题主要考察如何判断DOM节点文档前后位置，父子关系等。我看了下最后的回答，近9成的回答使用了非常啰嗦的方法，比例之高，实在出乎意料。实际上，本题答案只需寥寥数行，因为有原生的API，contains()可以判断节点是否有包含关系；compareDocumentPosition()可以判定任意位置关系。
“JS相关”目录存档
DOM小测28期 – DOM节点文档前后位置判断
2019年03月2日，星期六深入Node.compareDocumentPosition API
2019年03月2日，星期六
Node.compareDocumentPosition()方法可以用来对比两个HTML节点在文档中的位置关系，包括前后，父子，自身以及跨文档。不仅是DOM节点，文本节点，注释节点甚至属性节点的位置关系都可以判定，很强。
使用document.scrollingElement控制窗体滚动高度
2019年02月22日，星期五介绍一个更加兼容、更加标准的设置窗体滚动高度的方法，那就是document.scrollingElement，兼容性足矣在实际项目中应用。JS基础API，人人必须了解的特性，学到就是赚到。
DOM基础小测27期答疑文字版-窗体滚动二三事
2019年01月26日，星期六粉丝群第27期JS基础小测答疑文字版
2019年01月20日，星期日使用wavesurfer.js显示mp3 audio音频的波形图
2018年12月9日，星期日
如果你想实现右图所示的波形图效果，可以借助wavesurfer.js。wavesurfer.js上手简单，扩展丰富，有多达35个可选参数，什么音频速率控制，波形图大小尺寸啊，都完全不在话下。还有好多种方法，对了，还有很多额外的插件，丰富的使用案例。
基本上，你要想对音频进行解析，显示个图形啥的，不要多想了，就wavesurfer，童叟无欺，老少皆宜，居家旅行，开发必备。
HTML5 video视频播放Picture-in-Picture画中画技术
2018年12月2日，星期日
Chrome 70已经原生支持HTML5视频播放时候Picture-in-Picture，也就是俗称的画中画技术，也就是很多视频网站看评论时候，播放视频变小挂在右下角的这种交互技术。实际上，这里的画中画要比当前视频网站的画中画要更强，强在其是一个客户端层面的接口，小视频窗口是操作系统窗体级别的，就算你的浏览器切换到其他选项卡页面，或者最小化，也会在你电脑右下角播放视频。
于是乎，我们可以一边码代码一边看网页小视频了！
如何在HTML和JS中设置和获取var CSS变量
2018年11月16日，星期五
我们在CSS文件或者CSS语法中使用CSS原生变量驾轻就熟，但是如何通过JS代码动态创建或者改变CSS变量值怕是很多人就不知道了。本文就演示下如何在HTML标签和JS中设置CSS3 var变量，如何使用JS代码获取CSS变量值。本文不啰嗦，希望可以帮到你。
CSS scroll-behavior和JS scrollIntoView让页面滚动平滑
2018年10月21日，星期日
从去年年底开始，浏览器已经开始支持的原生平滑滚动定位，CSS scroll-behavior属性和JS scrollIntoView()方法都可以。本文就将捋一捋这些平滑滚动新特性的使用方法，实际效果，以及如何在实际中应用等。一如既往，丰富配图，含GIF演示和视频截屏，必要的源代码展示和详尽的demo，希望本文内容能够对您的学习有所帮助。
拖拽献祭中的黑山羊-DataTransfer对象
2018年09月30日，星期日
伟大的安兹·乌尔·恭释放了一个超位魔法——拖拽献祭中的黑山羊魔法！凡是不能手写页面元素拖拽效果者，即死，需10日才能复活！顿时，无数前端手足无措，惊恐万分，仓皇而逃，但终究难逃一死。此时，一位小白前端横空出世，靠着解构此魔法的关键DataTransfer对象，破解了这个超位魔法，挽救了无数的前端开发，而其破解的详细信息已经记录在这篇文章中……
我的应用
我的应用