`
deng131
  • 浏览: 678323 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

getElementByTagName 与 querySelectorAll

 
阅读更多
虽然网上有中文翻译但是还是直接看英文有感觉。getElementByTagName 与 querySelectorAll在节点查询时候在效率上区别。

Conclusion

The real reason why getElementsByTagName() is faster than querySelectorAll() is because of the difference between live and static NodeList objects. Although I’m sure there are way to optimize this, doing no upfront work for a live NodeList will generally always be faster than doing all of the work to create a static NodeList. Determining which method to use is highly dependent on what you’re trying to do. If you’re just searching for elements by tag name and you don’t need a snapshot, then getElementsByTagName() should be used; if you do need a snapshot of results or you’re doing a more complex CSS query, then querySelectorAll() should be used.

参考:
http://mzhou.me/?p=95119
http://www.w3.org/TR/selectors-api/#queryselectorall
http://www.nczonline.net/blog/2010/09/28/why-is-getelementsbytagname-faster-that-queryselectorall/
http://jsperf.com/queryselectorall-vs-getelementsbytagname
分享到:
评论

相关推荐

    IE中getElementsByTagName无法获取元素BUG

    2. **使用`querySelectorAll`代替**:`querySelectorAll`在所有现代浏览器以及IE8及以上版本中都可用,它可以替代`getElementsByTagName`,并且返回的是NodeList,而不是Live NodeList,这可能避免一些问题。...

    JavaSript DOM总结笔记.rar

    - 避免使用`getElementByTagName()`和`getElementsByTagName()`遍历整个文档。 - 使用`querySelector()`和`querySelectorAll()`代替,因为它们可以使用CSS选择器,通常更快。 - 使用事件委托:在父元素上添加事件...

    高效jQuery选择器的5个技巧实例分析

    现代浏览器支持getElementsByClassName, querySelector以及querySelectorAll(可以解析CSS语法)。然而,老版本的浏览器可能只提供getElementById以及getElementByTagName。在最坏的情况下,jQuery的Sizzle引擎必须...

    第9章 JS-Web-API-DOM【学会DOM,才能具备网页开发的基础】.rar

    DOM API提供了多种方法和属性,例如`document.getElementById()`、`document.querySelector()`和`document.querySelectorAll()`,它们分别用于通过ID、CSS选择器和类名查找元素。还有`getElementByTagName()`和`...

    1st-JS-code

    8. **DOM遍历和选择器API**:如querySelector、querySelectorAll、getElementByTagName、getElementById等,以及CSS选择器的使用。 9. **BOM(浏览器对象模型)**:处理浏览器窗口、导航、历史记录、定时器等功能。...

    JavaScript 试卷试题附答案

    - C: `document.getElementByTagName('file')[0]`:`getElementByTagName` 不接受自定义标签名,且语法错误。 - D: `document.getElementById('file')`:这是正确的写法。 - **正确答案**:D #### 9. 如何实现在...

    document节点对象的获取方式示例介绍

    `getElementByTagName()`返回的NodeList集合可以像数组一样通过索引访问,例如`document.getElementsByTagName("p")[0]`将获取第一个`<p>`元素。 6. **通过属性选择获取**: `getElementsByClassName()`方法根据...

    总结js中的一些兼容性易错的问题

    从IE8开始支持,因此在IE6/7环境下,实际可用的只有getElementByTagName。 - IE6/7不支持getElementsByTagName('*')会返回非元素节点。要么不用'*',要么自定义函数进行过滤。 - IE8下的querySelectorAll对属性选择...

    js 数据存储和DOM编程

    3. 使用更高效的DOM API,比如`children`代替`childNodes`,`childElementCount`代替`childNodes.length`,以及`querySelectorAll`代替`getElementByTagName`等。 4. 注意重绘和重排的影响。重排(reflow)和重绘...

Global site tag (gtag.js) - Google Analytics