HTML matchesSelector

搜索html中元素常用的是document.querySelector, document.querySelecotrAll,那么验证指定的查询语句跟元素是否匹配呢?可以使用matchsSelector.

function match(htmlEl, query ){
        let elPrototype = Element.prototype;
        let fn  = elPrototype.matches || elPrototype.webkitMatchesSelector || elPrototype.mozMatchesSelector || elPrototype.msMatchesSelector;
        if( fn ){
            return fn.call(htmlEl , query );
        }

        throw new Error(‘matchsSelector not be supported‘);
}


HTML matchesSelector

时间: 2024-08-04 03:31:19

HTML matchesSelector的相关文章

matchesSelector及低版本IE中对该方法的实现

matchesSelector用来匹配dom元素是否匹配某css selector.它为一些高级方法的实现提供了基础支持,比如事件代理,parent, closest等. W3C在2006年就提出了该方法草案,Firefox和Safari相继实现,比如 ? 1 2 3 4 5 6 <div id="wraper" class="item"></div> <script>     wraper.mozMatchesSelector(

matchesSelector 匹配选择器表达式sizzle的实现

Sizzle.matchesSelector = function( node, expr ) {     return Sizzle( expr, null, null, [node] ).length > 0; }; (function(){     var html = document.documentElement,         matches = html.matchesSelector || html.mozMatchesSelector || html.webkitMatch

事件委托详解

基本概念 事件委托,通俗地来讲,就是把一个元素响应事件(click.keydown......)的函数委托到另一个元素: 一般来讲,会把一个或者一组元素的事件委托到它的父层或者更外层元素上,真正绑定事件的是外层元素,当事件响应到需要绑定的元素上时,会通过事件冒泡机制从而触发它的外层元素的绑定事件上,然后在外层元素上去执行函数. 举个例子,比如一个宿舍的同学同时快递到了,一种方法就是他们都傻傻地一个个去领取,还有一种方法就是把这件事情委托给宿舍长,让一个人出去拿好所有快递,然后再根据收件人一一分发

javascript高级程序设计 第十一章--DOM扩展

javascript高级程序设计 第十一章--DOM扩展DOM最主要的扩展就是选择符API.HTML5和Element Traversal Selectors API:定义了两个方法 querySelector() 和 querySelectorAll(),能够基于CSS选择符从DOM中取得元素.querySelector()方法接收一个CSS选择符,返回该模式匹配的第一个元素,querySelectorAll()接收的参数一样,但是返回NodeList实例: matchesSelector()

DOM扩展

1.选择符API querySelector()方法   //类似于JQuery的$()方法 querySelectorAll()方法 matchesSelector()方法:接收一个CSS的选择符,如果调用元素与选择符匹配,返回true,否则,返回false. 2.对于元素间的空格,浏览器会返回文本节点.导致了在使用childNodes和firstNodes等属性时的行为不一致. 所以DOM元素添加了一下5个属性 childELementCount:返回子元素 firstElementChil

JavaScript----marquee滚动标签 图片无缝滚动 插入百度地图

页面的自动滚动效果,可由javascript来实现, 但是有一个html标签 - <marquee></marquee>可以实现多种滚动效果,无需js控制. 使用marquee标记不仅可以移动文字,也可以移动图片,表格等. 语法:<marquee>...</marquee>: 说明:在标记之间添加要进行滚动的内容. 重要属性: 1.滚动方向direction(包括4个值:up. down. left和 right) 语法:<marquee direct

You Don&#39;t Need jQuery

前端发展很快,现代浏览器原生 API 已经足够好用.我们并不需要为了操作 DOM.Event 等再学习一下 jQuery 的 API.同时由于 React.Angular.Vue 等框架的流行,直接操作 DOM 不再是好的模式,jQuery 使用场景大大减少.本项目总结了大部分 jQuery API 替代的方法,暂时只支持 IE10+ 以上浏览器. 目录 Translations Query Selector CSS & Style DOM Manipulation Ajax Events Ut

jQuery——实现弹窗

window.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&q

ajax——用ajax写登陆页面

ajax.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="