JavaScript高级选择器querySelector和querySelectorAll

querySelector 和 querySelectorAll 方法是 W3C Selectors API 规范中定义的。他们的作用是根据 CSS 选择器规范，便捷定位文档中指定元素。

目前几乎主流浏览器均支持了他们。包括 IE8(含) 以上版本、 Firefox、 Chrome、Safari、Opera。

querySelector和querySelectorAll的参数须是符合 css selector 的字符串。不同的是querySelector返回的是一个对象，querySelectorAll返回的一个集合(NodeList)。

获取页面属性ID为test的元素：

1. document.getElementById("test");
2. //or
3. document.querySelector("#test");
4. document.querySelectorAll("#test")[0];

获取页面class属性为”red”的元素:

1. document.getElementsByClassName('red')
2. //or
3. document.querySelector('.red')
4. //or
5. document.querySelectorAll('.red')

具体例子：

题目：写一个traverse函数，输出所有页面宽度和高度大于50像素的节点。

function traverse(){
    return Array.prototype.filter.call(document.querySelectorAll('body *'), function(node){
        return node.offsetWidth > 50 && node.offsetHeight > 50;
    });
}