getElementsByTagName for document fragments

原文链接
document fragments没有实现getElementsByTagName方法,但是实现了其他的选择器api:querySelector/querySelectorAll,除了那些写选择器引擎的人,没人关心这个,如果你也是关心这个,那么请继续阅读。
在没有很多dom方法的情况下,我依然可以写我的代码,但是没有getElementsByTagName方法不行,所以我决定实现它。

关于性能

JavaScript是一门很好的脚本语言,但是仍然是脚本语言。
要实现高性能的循环应该尽量避免下面的这些做法:

  • 1.try/catch块
  • 2.方法调用,即使是原生的方法
  • 3.获取dom属性(或者任何会调用复杂的getter/setter的方法)

请注意这是一个有序列表!

代码如下:

1
2
3
4
5
6
7
8
9
function getElementsByTagName(node, tagName) {
var elements = [], i = 0, anyTag = tagName === "*", next = node.firstChild;
while ((node = next)) {
if (anyTag ? node.nodeType === 1 : node.nodeName === tagName) elements[i++] = node;
next = node.firstChild || node.nextSibling;
while (!next && (node = node.parentNode)) next = node.nextSibling;
}
return elements;
}

一些需要注意的事情

  • Document fragments 不能有父节点
  • 这个方法只能查询document fragments,所以需要确保上下文节点不是一个普通的html元素

一个例子

1
2
3
4
5
a=document.createDocumentFragment();
b=document.createElement("div");
b.innerHTML="<div></div><div></div>"
a.appendChild(b);
alert(getElementsByTagName(a,"DIV").length)//3

转载注明出处或者联系作者
Fork me on GitHub