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{

　　}

}

转载于:https://www.cnblogs.com/myzy/p/5908675.html