浏览器 - 监听用户输入方式的改变 (advanced) 2019-11-29 描述当用户输入方式发生变化（mouseortouch）时运行回调。根据输入设备启用/禁用代码很有用。这个过程时动态的，并且适用于混合设备（例如：触摸屏笔记本电脑）。提示使用两个事件监听器假设一开始的输入为 mouse，然后在文档上绑定一个 touchstart 事件监听在 touchstart 中添加一个 mousemove 事件监听器来监听两次连续的 mousemove 事件触发是否在 20ms 内 30Seconds JavaScript Code
浏览器 - 添加监听事件 2019-11-28 描述使用事件代理为支持该事件的元素添加一个监听事件。提示使用 EventTarget.addEventListener()为元素添加一个监听事件如果可选对象中存在 target 属性，且当事件对象和指定的选择器相匹配时，我们才可以调用提供了正确的 this 上下文的回调如果可选对象中存在 target 属性，返回自定义代理函数的引用，以便在移除监听事件的时候可以进行使用可选的 opts 默认为不需 30Seconds JavaScript Code
浏览器 - 移除监听事件 2019-11-27 描述从一个元素上移除一个事件监听。提示使用 EventTarget.removeEventListener()从一个元素上移除一个使用 EventTarget.addEventListener()方法添加的事件监听第四个参数 opts 的默认值使用 false，否则的话需使用监听事件被添加时候的选项代码 constoff=(el,evt,fn,opts=false)=>el.removeEv 30Seconds JavaScript Code
浏览器 - 监听 DOM 的修改 (advanced) 2019-11-26 描述返回 MutationObserver 创建的对象，当指定的元素发生每一次变化时，都会运行提供的回调函数。提示使用 MutationObserver 观察给定元素的变化使用 Array.prototype.forEach()为每一次被检测到的变化执行回调第三个参数 options 的各项值都设置为 true，其具体说明可参见 MutationObserverInit 代码 constobserve 30Seconds JavaScript Code
CSS 视觉 - :is/:matches/:any 选择器 2019-11-25 描述:is 将选择器列表作为参数，可以选中该列表中的与之匹配的任何元素。这样紧凑的写法对有含有很多选择器的样式非常有用。HTML<header><p>Thisismyheaderparagraph</p></header><main><ul><li><p>Thisismyfirst</p><p>listitem</p></li></ul></main><footer><p>This 30Seconds CSS
浏览器 - 节点列表转换为数组 2019-11-22 描述将 NodeList 转换为列表。提示在数组的创建中使用扩展运算符将 NodeList 转换为一个数组当然，你也可以使用 Array.from，该方法可为一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例。使用他可以进行简单的数组去重合并：functioncombine(){letarr=[].concat.apply([],arguments);//合并数组 returnArray 30Seconds JavaScript Code
浏览器 - 标签页是否正在被浏览 2019-11-21 描述如果浏览器中的标签页面正在被浏览，请返回 true，否则的话返回 false。提示使用 Document.hidden 这个页面显示的 API 属性来检查浏览器中的标签页面是可见还是隐藏可结合 visibilitychange 事件对标题进行修改，效果可参见博客，具体代码如下：document.addEventListener('visibilitychange',function(){if 30Seconds JavaScript Code
浏览器 - 在元素前插入 HTML 2019-11-20 描述在指定元素之前插入一个 HTML 字符串。提示使用位置参数为 beforebegin 的 el.insertAdjacentHTML()方法将解析好的 htmlString 插入到 el 元素的前面位置参数可选值如下：beforebegin 元素之前 afterbegin 元素内部的第一个子节点之前 beforeend 元素内部的最后一个子节点之后 afterend 元素之后具体表现为 beforebegin 30Seconds JavaScript Code
浏览器 - 在元素尾部插入 HTML 2019-11-19 描述在指定元素的尾部后插入一个 HTML 字符串。提示使用位置参数为 afterend 的 el.insertAdjacentHTML()方法将解析好的 htmlString 插入到 el 元素的尾部后面 insertAdjacentHTML 不会重新解析自身正在使用的元素，因此元素内部的现有元素不会被破坏。这避免了额外的序列化步骤，使其比 innerHTML 操作更快代码 constinsertAfter 30Seconds JavaScript Code
浏览器 - https 重定向 2019-11-18 描述如果页面当前是 HTTP，把他重定向到 HTTPS。除此外，还应替换他的历史，以便按下返回按钮时，并不会让他返回 HTTP 页面。提示使用 location.protocol 获取当前使用的协议如果不是 HTTPS，使用 location.replace()将当前页面替换为 HTTPS 使用 location.href 获取完整的地址，使用 String.prototype.split()将协议部分从 30Seconds JavaScript Code
浏览器 - 隐藏元素 2019-11-15 描述隐藏所有指定的元素。提示使用 NodeList.prototype.forEach()让每一个指定的元素都可以设置其样式 display 的值为 none 当然，我们也可以使用 visibility:hidden。其区别如下：visibility:hidden 可以隐藏元素，但该元素在布局中依然占用空间。如果设置了该样式的子元素 visibility 为 visible，那么其子元素可见 disp 30Seconds JavaScript Code
浏览器 - 使用 SHA-256 创建一个 hash (advanced) 2019-11-14 描述使用 SHA-256 算法为一个值创建一个 hash，然后返回一个 promise。提示使用 SubtleCryptoAPI 为给定的值创建一个 hashcrypto.subtle 在不安全的上下文中将会返回 undefined 代码 consthashBrowser=val=>crypto.subtle.digest('SHA-256',newTextEncoder('utf-8').encod 30Seconds JavaScript Code
浏览器 - 是否包含 class 2019-11-13 描述如果元素有指定的 class 就返回 true，否则返回 false。提示使用 element.classList.contains()来检测元素是否有特定的 classclassList 是替代使用空格进行分隔的字符串 element.className 来访问类的一种更方便的方法虽然 element.classList 为只读属性，但是可以使用 add()和 remove()方法对他进行修改代码 c 30Seconds JavaScript Code
浏览器 - 获取样式 2019-11-12 描述为指定的元素返回某个特定的 CSS 值。提示使用 Window.getComputedStyle()获取指定元素的 CSS 值 getComputedStyle 还可以从伪元素中获取样式信息（如：::after，::before，::marker 等）getComputedStyle 的返回值是一个实时的 CSSStyleDeclaration 对象，当元素的样式更改时，它会自动更新本身代码 con 30Seconds JavaScript Code
浏览器 - 获取滚动位置 2019-11-11 描述返回当前页面的滚从位置。提示如果 pageXOffset 和 pageYOffset 存在就使用他们，否则的话就使用 scrollLeft 和 scrollTop 可以使用 window 来作为参数 el 的默认值代码 constgetScrollPosition=(el=window)=>({x:el.pageXOffset!==undefined?el.pageXOffset:el.scrollL 30Seconds JavaScript Code
Vditor v1.9.7 发布，支持标题锚点、语音阅读渲染 v1.9.7 简介该版本主要为 Markdown 的渲染提供了更多的支持和配置。其主要特性如下：支持代码高亮对行号的配置：options.preview.hljs.lineNumber 对选中的文本进行阅读：speechRender 为标题添加了锚点：#163 添加了初始化后的回调方法：options.after 修改静态方法 preview，以支持多次渲染在此感谢 547176052 反馈的 bug 和建议。v1.9.7 Vditor Markdown B3log 新闻
浏览器 - 获取图片地址 2019-11-08 描述获取一个元素中的所有图片，并将他们放到一个数组中。提示对提供的元素使用 Element.prototype.getElementsByTagName()方法来获取所有 <img> 元素使用 Array.prototype.map()来获取每一个图片元素中的 src 属性 includeDuplicates 参数的默认值为 false，表示需要过滤掉重复的图片地址创建一个 Set 来移除重复的图片地 30Seconds JavaScript Code
浏览器 - 表单转对象 2019-11-07 描述将表单中的一组元素编码为一个 object。提示使用 FormData 构造器将 HTML 中的 form 转换为 FormData 使用 Array.from()将 FormData 转化为数组使用 Array.prototype.reduce()从数组中构建对象代码 constformToObject=form=>Array.from(newFormData(form)).reduce((acc,[ 30Seconds JavaScript Code
浏览器 - 元素在屏幕中是否可见 (advanced) 2019-11-06 描述如果指定元素在屏幕中可见则返回 true，否则返回 false。提示使用 Element.getBoundingClientRect()和 window.inner(Width|Height)的值来检测给定的元素在屏幕中是否可见第二个可省略的参数用来检测元素是否全部可见。如果要检测元素是否只有部分可见的话，请传入 true 当然你也可以使用 IntersectionObserver 代码 co 30Seconds JavaScript Code
浏览器 - 父元素中是否包含子元素 2019-11-05 描述如果 parent 元素中包含 child 元素的话，返回 true，否则返回 false。提示检查 parent 是否和使用 child 是同一个元素使用 parent.contains(child)检查 parent 元素是否包含了 child 元素代码 constelementContains=(parent,child)=>parent!==child&&parent.contains(child) 30Seconds JavaScript Code