querySelectorAll

querySelectorAll 方法相比 getElementsBy 系列方法区别

最近有人问到querySelectorAll 方法相比 getElementsBy 系列方法区别,一时没想起来说些什么,今天查下文档,总结一下它们的区别,以便自己理解. 1. W3C 标准querySelectorAll 属于 W3C 中的 Selectors API 规范 [1].而 getElementsBy 系列则属于 W3C 的 DOM 规范 [2]. 2. 浏览器兼容querySelectorAll 已被 IE 8+.FF 3.5+.Safari 3.1+.Chrome 和 Opera…

sizzle分析记录：关于querySelectorAll兼容问题

querySelector和querySelectorAll是W3C提供的新的查询接口目前几乎主流浏览器均支持了他们.包括 IE8(含) 以上版本. Firefox. Chrome.Safari.Opera. 万能的sizzle在高版本的浏览器中复杂的选择器尽量走querySelectorAll,前提是这个匹配的节点没有兼容问题从IE8开始虽然支持querySelectorAll的API,但是会有各式各样的BUG,所以sizzle拿rbuggyQSA用来记录这个BUG问题 if ( supp…

IE6、IE7兼容querySelectorAll和querySelector方法-最终版本

querySelector 和 querySelectorAll 方法是 W3C Selectors API 规范中定义的.他们的作用是根据 CSS 选择器规范,便捷定位文档中指定元素.目前几乎主流浏览器均支持了他们.包括 IE8(含) 以上版本. Firefox. Chrome.Safari.Opera. querySelector 和 querySelectorAll 方法很好用,可惜IE6.IE7不支持,怎么让IE6.IE7也支持querySelectorAll和querySelector…

html5 新选择器 querySelector querySelectorAll

querySelector 返回满足条件的单个元素使用实例 HTML <div id="main">主体布局</div> JS var main =document.querySelector('#main'); console.log(main) 这时候结果返回的就是整个元素 <div id="main">主体布局</div> 返回一个查询元素测试谷歌 IE11 IE10 IE9 火狐可以正常使用 PS:…

javascript选择器querySelector和querySelectorAll的使用和区别

querySelector 和 querySelectorAll 方法是 W3C Selectors API规范中定义的.他们的作用是根据 CSS 选择器规范,便捷定位文档中指定元素. 目前几乎主流浏览器均支持了他们.包括 IE8(含) 以上版本. Firefox. Chrome.Safari.Opera. querySelector 和 querySelectorAll 在规范中定义了如下接口: module dom { [Supplemental, NoInterfaceObject] in…

DOM元素querySelectorAll可能让你意外的特性表现

一.时间紧急,废话少说本文所在的页面藏匿了下面这些代码: <img id="outside"> <div id="my-id"> <img id="inside"> <div class="lonely"></div> <div class="outer"> <div class="inner"><…

js高级选择器querySelector和querySelectorAll

querySelector 和 querySelectorAll 方法是 W3C Selectors API规范中定义的.他们的作用是根据 CSS 选择器规范,便捷定位文档中指定元素. 目前几乎主流浏览器均支持了他们.包括 IE8(含) 以上版本. Firefox. Chrome.Safari.Opera. querySelector 和 querySelectorAll 在规范中定义了如下接口: module dom { [Supplemental, NoInterfaceObject] in…

querySelector和querySelectorAll

jQuery被开发者如此的青睐和它强大的选择器有很大关系,比起笨重的document.getElementById.document.getElementByName… ,查找元素很方便,其实W3C中提供了querySelector和querySelectorAll查询接口已经实现了类似功能. 定义其实这两个方法看名字就能明白什么意思,不过还是引用一下W3C的解释 querySelector:return the first matching Element node within the n…

js的querySelector跟querySelectorAll

querySelector:document.querySelector('.className')------->可以选中.className的一个dom(注意只是一个) document.querySelector('#idName')------->可以选中#idName的一个dom querySelectorAll('.className'):这个的话就是可以选取页面上全部.className的dom元素,不止一个哦这个是为什么啊?为什么querySelector跟querySele…

sizzle源码分析（2）ID 类 tag querySelectorAll 快速匹配

不是所有的选择器都需要去分词,生成相应的匹配函数,这样流程比较复杂,当浏览器具备原生的方法去匹配元素是,没有理由不优先匹配,下面看看进入Sizzle后,它是怎么优先匹配这些元素的: function Sizzle( selector, context, results, seed ) { /* 执行$("ul.list>li span:eq(1)")时,递归第二次时, selector "ul.list>li span" */ var match, el…

document.querySelector和querySelectorAll方法

querySelector和querySelectorAll是W3C提供的新的查询接口,其主要特点如下: 1.querySelector只返回匹配的第一个元素,如果没有匹配项,返回null. 2.querySelectorAll返回匹配的元素集合,如果没有匹配项,返回空的nodelist(节点数组). 3.返回的结果是静态的,之后对document结构的改变不会影响到之前取到的结果. 这两个方法都可以接受三种类型的参数:id(#),class(.),标签,很像jquery的选择器. …

javascript DOM操作之 querySelector,querySelectorAll

javascript DOM操作之 querySelector,querySelectorAll…

跟随标准与Webkit源码探究DOM -- 获取元素之querySelector，querySelectorAll

使用CSS选择器获取元素 -- querySelector,querySelectorAll(HTML5) 标准 W3C Selector API Level 1为Document,DocumentFragment和Element追加了querySelector和querySelctorAll,原型为Element? querySelector(DOMString selectors)和 NodeList querySelectorAll(DOMString selectors),说明了匹配的算…

新增的querySelector、querySelectorAll测试

从IE9开始DOM开始支持支持CSS的选择器了,DOM提供了两个接口 querySelector 得到一个DOM querySelectorAll 得到一组DOM 一个个的解释这些选择器也没有必要,我们结合前面的数组知识,写一段代码来说明.页面上有一组元素,然后会依据我们数组中的预订选择值选择相应元素,并将背景变红色,同时提示选择器的含义.这样的代码便于运行理解和扩展. html的结构部分 <body> <div> <input type="button"…

重要选择器querySelector和querySelectorAll

他们的作用是根据 CSS 选择器规范,便捷定位文档中指定元素. 目前几乎主流浏览器均支持了他们.包括 IE8(含) 以上版本. Firefox. Chrome.Safari.Opera. querySelector 和 querySelectorAll 在规范中定义了如下接口: 从接口定义可以看到Document.DocumentFragment.Element都实现了NodeSelector接口.即这三种类型的元素都拥有者两个方法.querySelector和querySelectorAll的…

高级选择器querySelector和querySelectorAll

Javascript新提供的querySelector和querySelectorAll方法,是仿照CSS选择器功能编写的 querySelector 功能:该方法返回满足条件的单个元素.按照深度优先和先序遍历的原则使用参数提供的CSS选择器在DOM进行查找,返回第一个满足条件的元素,如例: <div> <div> <div> <p>第三层</p> </div> <p>第二层</p> </div>…

HTML5中querySelector()和querySelectorAll()

HTML5向Web API新引入了document.querySelector以及document.querySelectorAll两个方法用来更方便地从DOM选取元素,功能类似于jQuery的选择器.这使得在编写原生JavaScript代码时方便了许多. 1.用法两个方法使用差不多的语法,都是接收一个字符串参数,这个参数需要是合法的CSS选择语法. element = document.querySelector('selectors'); elementList = document.qu…

Array.prototype.slice.call(document.querySelectorAll('a'), 0)

Array.prototype.slice.call(document.querySelectorAll('a'), 0)的作用就是将一个DOM NodeList 转换成一个数组. slice()方法可提取字符串的某个部分,并以新的字符串返回被提取的部分.语法为arr.slice([begin[, end]]),其中arr可为string或Array.更多了解可以参考MDN document.querySelectorAll('a')获取了一个NodeList对象,它看起来像一个数组,你可以使用…

HTML5中DOM元素的querySelector/querySelectorAll的工作机制

在HTML5中,提供了强大的DOM元素选择API querySelector/querySelectorAll,允许使用JavaScript代码来完成类似CSS选择器的DOM元素选择功能.通常情况下,我们都是使用的document.querySelector/querySelectorAll来选择DOM元素,但是有些时候会使用DOM元素上的querySelector/querySelectorAll方法,此时就有些怪异了. 比如说,下面的这样一个HTML页面(示例页面中为了方面说明问题,我为每个…

如何循环遍历document.querySelectorAll()方法返回的结果

使用JavaScript的forEach方法,我们可以轻松的循环一个数组,但如果你认为document.querySelectorAll()方法返回的应该是个数组,而使用forEach循环它: /* Will Not Work */ document.querySelectorAll('.module').forEach(function() { }); 执行上面的代码,你将会得到执行错误的异常信息.这是因为,document.querySelectorAll()返回的不是一个数组,而是一个No…

querySelector 和 querySelectorAll 的使用

querySelector 和 querySelectorAll 的使用非常的简单,就像标题说到的一样,它和 CSS 的写法完全一样,对于前端开发人员来说,这是难度几乎为零的一次学习.假如我们有一个 id 为 test 的 DIV,为了获取到这个元素,你也许会像下面这样: document.getElementById("test"); document.querySelectorAll("#test")[0]; 现在我们来试试使用新方法来获取这个元素: 比如接下来…

<!DOCTYPE html><html><body> <div id="query">第一个</div> <div class="query">第二个</div> </body><script> var htmlStr = document.querySelectorAll('body div'); for (var i = 0; i < htmlSt…

querySelectorAll 方法相比 getElementsBy 系列方法有什么区别

感谢 http://www.zhihu.com/question/24702250 简生的回答 1. W3C 标准 querySelectorAll 属于 W3C 中的 Selectors API 规范.而 getElementsBy 系列则属于 W3C 的 DOM 规范. 2. 浏览器兼容 querySelectorAll 已被 IE 8+.FF 3.5+.Safari 3.1+.Chrome 和 Opera 10+ 良好支持 . getElementsBy 系列,以最迟添加到规范中的 ge…

querySelectorAll的BUG

querySelector和querySelectorAll是W3C提供的新的查询接口目前 IE8/9及Firefox/Chrome/Safari/Opera 的最新版已经支持它们. 但是Element.querySelectorAll有个bug <div> <div id="bar"> <span> <a href="###">asfd</a> </span> </div> &l…

querySelector和querySelectorAll方法介绍

module dom { [Supplemental, NoInterfaceObject] interface NodeSelector { Element querySelector(in DOMString selectors); NodeList querySelectorAll(in DOMString selectors); }; Document implements NodeSelector; DocumentFragment implements NodeSelector; E…

HTML5中类jQuery选择器querySelector的高级使用 document.querySelectorAll.bind(document);

基本用法 querySelector 该方法返回满足条件的单个元素.按照深度优先和先序遍历的原则使用参数提供的CSS选择器在DOM进行查找,返回第一个满足条件的元素. ----> querySelector得到一个DOM var element = document.querySelector('#container');//返回id为container的dom var element = document.querySelector('div#container');//返回id为contai…

document.querySelectorAll遍历（forEach小解）

document.querySelectorAll兼容性良好,在之前的项目中就其遍历方式出了错误,先做个小结: 1.for循环传统遍历方法 for(var i= 0; i< document.querySelectopAll(".a").length; i ++){ document.querySelectopAll(".a")[i].style.color= "red"; } 2.forEach方法 forEach方法可以遍历一个js数…

querySelectorAll与getElementsBy对比有什么不同

querySelectorAll与getElementsBy对比有什么不同javascript中的querySelectorAll与getElementsBy都可以获取dom元素对象,但是他们又有什么不同点呢?1. W3C 标准 querySelectorAll 属于 W3C 中的 Selectors API 规范.而 getElementsBy 系列则属于 W3C 的 DOM 规范.2. 浏览器兼容 querySelectorAll 已被 IE 8+.FF 3.5+.Safari 3.1+.C…

关于querySelectorAll的一个坑

刚学JS的DOM操作时,就知道了匹配一堆元素,会获得NodeList和HTMLCollection这两个对象,不过当时并没有深入去研究两者的区别因为无论是NodeList还是HTMLCollection,都可以用方括号来获取想要的节点,直到今天不幸踩坑今天写了一个网页,用AJAX向后端要数据,格式是JSON,解析后要做一个判断,看看用来填充数据的HTML DIV元素够不够,不够用,就要调用自定义函数添加一个,直到DIV够用. 这是一个很简单的循环就能完成的事情,我隐约记得书上讲这些集合都…

document.querySelectorAll() 与document.getElementTagName() 的区别

这个区别我估计大神都不知道,问题源于博主,细节被一个妹子发现的事情经过是这样 <ul> <li>item</li> <li></li> <li></li> <li>item</li> <li>item</li> </ul> 第一阶段 //本人折腾了一个循环 var alis = document.getElementTagName('li') for(var i…

【querySelectorAll】的更多相关文章