DOM元素的选择

使用jQuery可以方便的选择文档中的元素，它的核心就是通过CSS选择符查询DOM文档取得元素的引用，从而抛开getElementById()和getElementsByTagName().

Selector API让浏览器原生支持这些功能，解析和查询文档的操作可以在浏览器内部完成，可以极大的改善性能。

Selector API Level 1的核心是两个方法：querySelector()和querySelectorAll(),在兼容的浏览器中，可以通过Document 和Element类型的实例调用它们。目前 已完 全 支持 Selectors API Level 1 的 浏览器 有 IE 8+、 Firefox 3. 5+、 Safari 3. 1+、 Chrome 和 Opera 10+。

querySelector()方法接收一个css选择符，返回与该模式匹配度额第一个元素，如果没有找到匹配的元素，返回null.

//取得body元素
var body = document.quertSelector('body');
//取得ID为‘myDiv’的元素
var myDiv = document.querySelector('#myDiv');
//取得类为'selected'的第一个元素
var selected = document.querySelector('.selected');
//取得类为'button'的第一个图像元素
var img = document.querySelector('img.button');
复制代码

通过Document类型调用querySelector()方法时，会在文档范围没查找，而通过Element类型调用时，只会在该元素的后代范围内查找。如果传入的参数不被支持，该方法会抛出错误。

querySelectorAll()方法接收一个css选择符，返回一个NodeList的实例（类数组对象），该实例包含所有匹配的元素，返回的内容不是对文档进行动态搜索的结果，而是类似一组元素的快照，如果文档中没有匹配的元素，返回空的NodeList。

能够调用querySelector()方法的类型包括Document,DocumentFragment和Element.

//取得所有类为'selected'的所有元素
var selecteds = document.querySelectorAll('.selected');
复制代码

如果要遍历返回的NodeList中的每一个元素，可以使用item()方法或者方括号语法。 如果传入的选择符有错误或者不被支持，该方法同样会抛出错误。

Selector API Level2规范为Element类型新增了一个matchesSelector()方法。该方法接收一个css选择符作为参数，如果调用该方法的元素与该选择符匹配，返回true，否则返回false.

在取得某个元素的引用的情况下，使用该方法能够方便的检测它是否能被querySelector()和querySelectorAll()方法返回。

截止到现在，Firefox和chrome并未实现该方法，但是，Firefox提供了mozMatchesSelector()支持该方法，Safari 5+ 和Chrome通过webkitMatchesSelector()支持该方法。这里有一个包装函数可以更好的使用该方法：

function matchesSelector(element,selector){
  if(element.matchesSelector){
      return element.matchesSelector(selector);
  } else if(element.msMatchesSelector){
      return element.msMatchesSelector(selector);
  } else if(element.mozMatchesSelector){
      return element.mozMatchesSelector(selector);
  } else if(element.webkitMatchesSelector) {
      return element.webkitMatchesSelector(selector);
  } else{
      return new Error('Not supported.');
  }
}
复制代码

本文为JS高程读后感

转载于:https://juejin.im/post/5cb2d390e51d456e7f0ba555