虽然网上有中文翻译但是还是直接看英文有感觉。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的使用 .dd1{ color:#FF0000; } .dd2{ color:blue; } dfdfd dfdfd dfdfd [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
2. **使用`querySelectorAll`代替**:`querySelectorAll`在所有现代浏览器以及IE8及以上版本中都可用,它可以替代`getElementsByTagName`,并且返回的是NodeList,而不是Live NodeList,这可能避免一些问题。...
- 避免使用`getElementByTagName()`和`getElementsByTagName()`遍历整个文档。 - 使用`querySelector()`和`querySelectorAll()`代替,因为它们可以使用CSS选择器,通常更快。 - 使用事件委托:在父元素上添加事件...
现代浏览器支持getElementsByClassName, querySelector以及querySelectorAll(可以解析CSS语法)。然而,老版本的浏览器可能只提供getElementById以及getElementByTagName。在最坏的情况下,jQuery的Sizzle引擎必须...
在上述示例中,IE的`getElementById()` 行为与标准不符,它似乎首先检查`name`属性,然后才检查`id`。这导致在某些情况下,`getElementById('elementId')`可能会返回具有相同`name`而非`id`的元素。相反,Firefox和...
DOM API提供了多种方法和属性,例如`document.getElementById()`、`document.querySelector()`和`document.querySelectorAll()`,它们分别用于通过ID、CSS选择器和类名查找元素。还有`getElementByTagName()`和`...
–在文档里面通过id来找结点 2.document.getElementByTagName(tagName); –返回一个数组,包含对这些结点的引用 –如:document.getElementByTagName(“span”);将返回所有类型为span的结点 二.间接引用结点 3....
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....
使用`getElementByTagName`、`getElementByName`或`getElementById`等方法定位到表单元素,并填充表单数据。 - **Demo5**: 实现网页登录。结合前面的知识点,完成账号密码的填写和提交过程。 #### 六、高级应用 - *...
#### 创建与添加新元素 6. **`createElement` 和 `createTextNode` 方法**: - `createElement` 方法用于创建新的 HTML 元素。 - `createTextNode` 方法用于创建文本节点。 - 示例中的 `var op = document....
8. **DOM遍历和选择器API**:如querySelector、querySelectorAll、getElementByTagName、getElementById等,以及CSS选择器的使用。 9. **BOM(浏览器对象模型)**:处理浏览器窗口、导航、历史记录、定时器等功能。...
- C: `document.getElementByTagName('file')[0]`:`getElementByTagName` 不接受自定义标签名,且语法错误。 - D: `document.getElementById('file')`:这是正确的写法。 - **正确答案**:D #### 9. 如何实现在...
- 注意区别:`getElementByTagName`返回单个元素,而`getElementsByName`返回元素集合。 - **语法细节** - 比较运算符应使用`==`而非单个`=`。 - Java不支持创建泛型数组。 #### 三、Eclipse IDE快捷键 - **...
此外,CXMLOper可能还定义了如`LoadXMLFile`、`SaveXMLFile`、`GetElementByTagName`、`SetElementAttribute`等方法,分别用于加载XML文件、保存XML文件、根据标签名获取元素和设置元素属性。 `LoadXMLFile`函数...
具体实现过程中,我们需要先获取FLASH对象的坐标,这可能需要用到浏览器控件提供的方法,如`GetElementByTagname`或`GetElementById`来定位到FLASH对象,然后获取其位置信息。在得到坐标后,构建`SendInput`函数所需...
`getElementByTagName()`返回的NodeList集合可以像数组一样通过索引访问,例如`document.getElementsByTagName("p")[0]`将获取第一个`<p>`元素。 6. **通过属性选择获取**: `getElementsByClassName()`方法根据...
从IE8开始支持,因此在IE6/7环境下,实际可用的只有getElementByTagName。 - IE6/7不支持getElementsByTagName('*')会返回非元素节点。要么不用'*',要么自定义函数进行过滤。 - IE8下的querySelectorAll对属性选择...
此外,Mozilla不支持IE中的`all`属性,推荐使用`document.getElementById`、`document.getElementByTagName`等方法来选取元素,避免语法差异带来的兼容性问题。 #### 总结与展望 JavaScript开发不仅仅是编写代码,...
3. 使用更高效的DOM API,比如`children`代替`childNodes`,`childElementCount`代替`childNodes.length`,以及`querySelectorAll`代替`getElementByTagName`等。 4. 注意重绘和重排的影响。重排(reflow)和重绘...