Question

这是我的HTML代码

<html> 
  <head>
     <title> Test Page </title>
     <script type='text/javascript'>
        function test() {
           var ta = document.getElementsByTagName('body')[0].getElementsByTagName('li');
        }
     </script>
  </head>
  <body onload='test()'>
     <ul>
        <li> Test 1 </li>
        <li> Test 1 </li>
        <li> Test 1 </li>
        <li> Test 1 </li>
     </ul>
  </body>
</html>

以下哪项更好，为什么？

document.getElementsByTagName('body')[0].getElementsByTagName('li')

document.getElementsByTagName('li')

此外，我找不到任何关于浏览器的getElementsByTagName实现的文档或参考[至少在一些主要浏览器上的概述]虽然我发现有关document.getElementById的非常有趣的事情，它在firefox和chrome中至少有一些哈希查找。希望对实施也有一些帮助。

Answer 1

首先，你永远不应该得到这个身体标签：

document.getElementsByTagName('body')[0]

使用body的内置属性总是更有效：

document.body

其次，所有性能问题都应该通过jsPerf之类的工具进行测试来解答。在这种情况下，如果需要，您可以构建一个比较这两者的测试，但我认为在以前的简化中，这一点没有实际意义：

document.getElementsByTagName("li")

和

document.body.getElementsByTagName("li")

在jsPerf I built to test this中，document.getElementsByTagName('li')是最快的，其次是document.body.getElementsByTagName('li')，document.getElementsByTagName('body')[0].getElementsByTagName('li')是最慢的。

以下是来自多个浏览器的测试截图：

enter image description here

Answer 2

首先，您应该避免functions inside functions提高效果，并在DOM is slow之上。

您可以像这样重构代码：

function getLis(){
  return document.getElementsByTagName('li');
}

function test() {
  var ta = getLis();
}

这样，javascript只会将这两个函数存储在内存中一次，并且可以根据需要多次调用它们。

对于你的问题，以后应该更快，因为它只有一个呼叫：

document.getElementsByTagName('li')

至于速度，我的猜测是正确的，我在jsperf创建了测试用例：

Speed Test

<强>结果：

<强> document.getElementsByTagName（ '礼'）

2,141,067
±2.07%
fastest

<强> document.getElementsByTagName（ '主体'）[0] .getElementsByTagName（ '礼'）

704,856
±4.40%
67% slower

屏幕截图：

enter image description here

Answer 3

两行代码基本上是相同的，除了document.getElementsByTagName（'li'）将从文档的顶层搜索，但是@jfriend00指出你应该将body标签引用为文档。体。

在较大的DOM结构中使用带有.getElementById的document.getElementsByTagName会更有效。例如，如果您在ul上有＃my-list的id，那么

var mylist = document.getElementById('#my-list');
var lis = mylist.getElementsByTagName('lil);

现代浏览器有更好的搜索DOM的方法，例如querySelectorAll，请检查此资源https://developer.mozilla.org/en/DOM/Document.querySelectorAll

Answer 4

尽管最后一次测试给了我一个错误，你可以在这里查看：http://jsperf.com/document-body-id

我用200k的互动进行了一些测试。结果告诉我， document.get ... 和保存的正文版本一样快（31ms）; document.body.get ... 版本是最慢的（52毫秒）。所以，直接使用文档：D

javascript getelementsbytagname效率

4 个答案:

Speed Test