我们都知道能通过选择器（通过 document.querySelectorAll ）获取一个 NodeList ，并可为每个元素设置样式，但有什么更高效的方法为选择器设置样式呢（例如你可以在样式表里完成）：
var sheet = (function() { // 创建 <style> 标签 var style = document.createElement('style'); // 如果你需要指定媒介类型，则可以在此添加一个 media (和/或 media query) // style.setAttribute('media', 'screen') // style.setAttribute('media', 'only screen and (max-width : 1024px)') // WebKit hack :( style.appendChild(document.createTextNode('')); // 将 <style> 元素添加到页面 document.head.appendChild(style); return style.sheet; })(); // 用法 sheet.insertRule("header { float: left; opacity: 0.8; }", 1);
这对于一个动态且重度依赖 AJAX 的网站来说是特别有用的。如果你为一个选择器设置样式，那么你就不需要为每个匹配到的元素都设置样式（现在或将来）。
matchesSelector
我们经常会在进行下一步操作前进行输入校验，以确保是一个可靠值，或确保表单数据是有效的，等等。但我们平时是怎么确保一个元素是否有资格进行进一步操作呢？如果一个元素有给定匹配的选择器，那么你可以使用 matchesSelector 函数来校验：
function matchesSelector(el, selector) { var p = Element.prototype; var f = p.matches || p.webkitMatchesSelector || p.mozMatchesSelector || p.msMatchesSelector || function(s) { return [].indexOf.call(document.querySelectorAll(s), this) !== -1; }; return f.call(el, selector); } // 用法 matchesSelector(document.getElementById('myDiv'), 'div.someSelector[some-attribute=true]')
就这样啦，上述 7 个 JavaScript 函数是每个开发者都应该时刻记着的。有哪个函数我错过了呢？请把它分享出来！