原生DOM选择器querySelector和querySelectorAll

使用这两个方法无法查找带伪类状态的元素，比如querySelector(‘:hover‘)不会得到预期结果。

  querySelectorAll

该方法返回所有满足条件的元素，结果是个nodeList集合。查找规则与前面所述一样。

elements = document.querySelectorAll(‘div.foo‘);//返回所有带foo类样式的div

但需要注意的是返回的nodeList集合中的元素是非实时（no-live）的，想要区别什么是实时非实时的返回结果，请看下例：

  <div id="container">
      <div></div>
      <div></div>
  </div>

//首先选取页面中id为container的元素

container=document.getElementById(‘#container‘);

console.log(container.childNodes.length)//结果为2

//然后通过代码为其添加一个子元素

  container.appendChild(document.createElement(‘div‘));

//这个元素不但添加到页面了，这里的变量container也自动更新了

console.log(container.childNodes.length)//结果为3

通过上面的例子就很好地理解了什么是会实时更新的元素。document.getElementById返回的便是实时结果，上面对其添加一个子元素后，再次获取所有子元素个数，已经由原来的2个更新为3个(这里不考虑有些浏览器比如Chrome会把空白也解析为一个子节点)。

感觉区别不大是吧，但如果是稍微复杂点的情况，原始的方法将变得非常麻烦，这时候 querySelector 和 querySelectorAll 的优势就发挥出来了。比如接下来这个例子，我们将在 document 中选取 class 为 test 的 div 的子元素 p 的第一个子元素，当然这很拗口，但是用本文的新方法来选择这个元素，比用言语来描述它还要简单。

  document.querySelector("div.test>p:first-child");
  document.querySelectorAll("div.test>p:first-child")[0];

我们使用 querySelectorAll 给所有 class 为 emphasis 的元素加粗显示。

  var emphasisText = document.querySelectorAll(".emphasis");
  for( var i = 0 , j = emphasisText.length ; i < j ; i++ ){
      emphasisText[i].style.fontWeight = "bold";
  }

这是原生方法，比起jquery速度快