首页 > 代码库 > HTML5中类jQuery选择器querySelector和querySelectorAll的使用

HTML5中类jQuery选择器querySelector和querySelectorAll的使用

支持的浏览IE8+,Firefox3.5+,Safari3.1+ Chrome和Opera 10+

1.querySelector()方法接收一个选择符,返回第一个匹配的第一个元素,如果没有返回null

eg:var body = document.querySelector(‘body‘);

  var myDiv = document.querySelector(‘#myDiv‘);

  var selected = document.querySelector(‘.selected‘);

  var img = document.body.querySelector(‘img .button‘);

 

2.querySelectorAll()方法返回的一个NodeList的实例。

eg: var ems = document.getElementById(‘myDiv‘).querySelectorAll(‘em‘);

  var strongs = document.querySelectorAll(‘p strong‘);

 

3.matchesSelector(),Eelement类型新增的方法。接收css 选择符,如果调用元素与该选择符匹配,返回true,否则返回false

目前除IE6-IE8,Firefox/Chrome/Safari/Opera/IE 的最新版本均已实现,但方法都带上了各自的前缀.

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{

  }

}

HTML5中类jQuery选择器querySelector和querySelectorAll的使用