matchesSelctor方法已经被FF/safari(每次都打错这个词- -)/chrome等浏览器支持,其作用是匹配一个给定字符串selector,如果匹配成功,返回true,否则,返回false;
SELECTORS API LEVEL 2提供的接口:
这个方法常用于事件委托等等当中;不过,并不是所有的浏览器都支持这个方法,而且每个浏览器的实现方式也不一样;为此,需要一个兼容性的方案;比如:
var html = document.documentElement, matches = html.matchesSelector || html.mozMatchesSelector || html.webkitMatchesSelector || html.msMatchesSelector;
根据标准,refElement可以是节点树的某个节点,也可以是随意的refNode,比如document.createElement所产生的;
var divEl=document.createElement( "div" ); var docFrag=document.creatDocumentFragment();
不过,IE9在实现过程中,认为这样产生的node是一个disconnected node,这还包括documentFragment;所以,在IE9中,disconnected node是不能使用这个方法的;
说道matchesSelctor,看到jQuery中提供了类似的方法,就是is,但是is方法和原生的方法区别很大,首先,is方法扩展了很多东西出来,什么eq/contains/last/first一堆的东西;is遵循的是至少化原则,就是说在候选集中,如果有一个符合的就算是is成功;但是,在使用is的自扩展出来的方法,仍然要小心,不然,有时就会稀里糊涂;比如:
$(".child").click(function(){ if($(this).is("#parent>.child:eq(1)")){ $(this).css("color","red") } })
因为("#parent>.child:eq(1)")并不以$(this)作为context,当使用is的时候,因为其中的pos关系,匹配规则是以document为context,找到匹配("#parent>.child:eq(1)"),如果匹配到了元素,返回true,于是,我建议在使用is的时候,尽可能的使用simple一点的(’div’)或者原生的选择符,比如:nth-child/:first-child,还有CSS3中的浏览器也支持的;
对于matchesSelctor的原生方法,如果一个selector是非法的,选择器无法匹配的,这个方法并不返回false,而是抛出异常;要注意的是,在以<Gecko 2.0(指FF)为内核的浏览器中,并不抛出异常,而是返回false;
因为IE9的关系和异常处理,大致一个兼容性的matchesSelctor可以是这样的:
matchesSlector=function(refElement,selector){ var html = document.documentElement, matches = html.matchesSelector || html.mozMatchesSelector || html.webkitMatchesSelector || html.msMatchesSelector; var disconnectedMatch = matches.call( document.createElement( "div" ), "div" ); try{ var ret=refElement.matches(selector); //过滤IE9的问题; if(ret||!!disconnectedMatch||node.document&&node.document.nodeType!==11){ return ret; } }catch(e){} }