`
deng131
  • 浏览: 661823 次
  • 性别: 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
分享到:
评论

相关推荐

    javascript getElementByTagName的使用

    javascript getElementByTagName的使用 .dd1{ color:#FF0000; } .dd2{ color:blue; } dfdfd dfdfd dfdfd [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

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

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

    document.all与getElementById、getElementsByName、getElementsByTagName用法区别-getElementById

    HTML DOM 定义了多种查找元素的方法,除了 getElementById() 之外,还有 getElementsByName() 和 getElementsByTagName()。

    DOM的基本方法.txt

    一.直接引用结点 1.document.getElementById(id);...2.document.getElementByTagName(tagName); --返回一个数组,包含对这些结点的引用 --如:document.getElementByTagName("span");将返回所有类型为span的结点

    DOM 基本方法

    –在文档里面通过id来找结点 2.document.getElementByTagName(tagName); –返回一个数组,包含对这些结点的引用 –如:document.getElementByTagName(“span”);将返回所有类型为span的结点 二.间接引用结点 3....

    jQuery实现隔行变色的方法分析(对比原生JS)

    var tab = document.getElementByTagName('table')[0]; var tr = tab.getElementByTagName('tr'); for(var i=0;i<tr.length;i++){ if(i%2==0){ tr[i].style.background="orange"; }else{ tr[i].style....

    javascript 有用的脚本函数

    document.getElementByTagName)return false; var headers = document.getElementByTagName(“h1”); for(var i = 0;i<headers.length;i++){ addClass(elem,”intro”); } } function styleElementSiblings(tag,...

    js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件

    1. event.preventDefault(); — 阻止元素的默认事件。...var samp = document.getElementByTagName(“a”); samp.addEventListener(“click”,function(e){e.preventDefault()},false); 解释:点击链接的时候正常情况

    jQuery DOM操作小结与实例

    Javascript中的getElementById(),getElementByTagName(),getAttribute()和setAttribute()方法,都是dom core的组成部分。 2. HTML_DOM 使用HTML_DOM来获取表单对象的方法 Document.forms 使用HTML_D

    浅谈javascript中的DOM方法

     2)element.getElementByTagName(tag);通过标签名来获取;  3)element.getElementByClassName(class);通过属性类名来获取; 2:属性的set和get方法.  1)object.getAttribute(attribute);获取元素的属性.===>>>...

    基本DOM节点操作

    getElementByTagName():获取指定元素标签名的元素数组。 getElementByName():获取具有指定属性name的元素数组。 2、子节点 element.childNodes:返回该元素的子节点数组。注意:换行在浏览器中作为text节点,需要...

    auto-save:一个简单的计时器包装器,可用于在基于文本的 Web 应用程序(如 Google Docs)中实现延迟自动保存

    自动保存一个简单的计时器包装器,可用于... getElementByTagName ( 'textarea' ) [ 0 ] ;txt . oninput = function ( ) { interval ( function ( ) { console . log ( 'do some saving.' ) ; } ) ;} ;执照麻省理工学院

    原生JS实现列表子元素顺序反转的方法分析

    本文实例讲述了原生JS实现列表子元素顺序反转的方法。...var list = ul.getElementByTagName('li'); var length = list.length; while(length--){ ul.appendchild(ul.childNodes[length]); } 这种方法在子

    巧用局部变量提升javascript性能

    javascript中一个标识符所在的位置越深,...– 优化前 –> [removed] function initUI () { var bd = document.body, links = document.getElementByTagName(“a”), i=0, len=links.length; while(i < len){ update

    javascript中HTMLDOM操作详解

    二、作用: ...1)通过id查找元素(document.getElementById();) ”d”> var x=document.getElementById(“d”);...2)通过标签名查找元素 ...var y=x.getElementByTagName(“div”); 3)通过类名查找元素 三、改变HTML

    js从外部获取图片的实现方法

    var getBody=document.getElementByTagName('body')[0]; getBody.appendChild(img); 以上这篇js从外部获取图片的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持软件开发网。

    Jquery中CSS选择器用法分析

    用于选择HTML页面中已有的标签元素,又称元素选择器,格式:$(“element”),如$(“div”),同getElementByTagName 2. ID选择器 用于获取某个具有id属性的元素,格式如下:$(“id”),同getElementById 代码如下:&lt...

    JQuery性能优化的几点建议

    在class前面使用tag:jQuery中第二快的选择器就是tag选择器(如$(‘head’)),因为它和直接来自于原生的Javascript方法getElementByTagName()。所以最好总是用tag来修饰class(并且不要忘了就近的ID);  3. 使用子...

Global site tag (gtag.js) - Google Analytics