Question

我想知道在JavaScript中选择元素的两种不同语法。

如果我想从当前文档中选择所有div，那么：

var divs = document.getElementsByTagName("div");
alert("There are "+divs.length+" Divs in Document !");

工作正常。但是还有另一种方法，比如：

var divs = document.querySelectorAll("div");
alert("There are "+divs.length+" Divs in Document !");

当他们两个以同样的方式工作时。它们之间的区别是什么？

哪一个更快？

为什么？

两者如何运作？

提前致谢。我已经看到过这样的问题，但他们并不满足这种需求。

Answer 1

大多数回答是错误的。 Nicolae Olariu是唯一一位正确回答

的人

哪一个更快？为什么呢？

不是问题。真正的问题是“它如何运作？”

主要区别在于此示例：

<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>Yandex</title> 

</head> 
<body> 
    <a href="((http://yandex.ru))">Яндекс</a>, 
    <a href="((http://yandex.com))">Yandex</a> 
</body> 
<script>

var elems1 = document.getElementsByTagName('a'), // return 2 lements, elems1.length = 2 
    elems2 = document.querySelectorAll("a");  // return 2 elements, elems2.length = 2 

document.body.appendChild(document.createElement("a")); 

console.log(elems1.length, elems2.length);  // now elems1.length = 3! 
                                            // while elems2.length = 2
</script>
</html>

因为querySelectorAll返回一个静态（非实时）元素列表。

Answer 2

getElementsByTagName仅根据标记名称选择元素。 querySelectorAll可以使用any selector，这可以提供更多的灵活性和强大功能，但它更新，浏览器支持也更弱。

getElementsByTagName可能更快，因为它更简单，但这不太可能对你用它做的任何事情产生明显的影响。

Answer 3

来自MDN：

  element = document.querySelector(selectors);

返回文档中的第一个元素（使用文档节点的深度优先预先遍历遍历），与指定的选择器组匹配。

  elements = element.getElementsByTagName(tagName)

返回具有给定标记名称的元素列表。搜索指定元素下面的子树，不包括元素本身。返回的列表是实时的，这意味着它会自动使用DOM树更新自己。因此，不需要使用相同的元素和参数多次调用element.getElementsByTagName。

Answer 4

querySelector还支持其他CSS选择器（例如"#id"）按ID获取元素，"input[type=text]"获取具有type=text属性的所有输入元素。有关详细信息，请参阅here。

对于简单查询（例如你所问的那个），它们可能会同样快，但对于高级CSS选择器，使用querySelectorAll比使用querySelectorAll要快得多（更不用说要编写的代码少）手动过滤自己，这就是为什么像jQuery这样的库在浏览器支持时使用{{1}}。

Answer 5

这是关于querySelector和getElementsByTagName之间差异的example。

在此示例中，作者选择querySelector来解决问题。

getElementsByTagName也返回一个实时nodeList，当我们将链接附加到内存中的无序列表时，链接将从文档中删除，并且集合的长度会受到影响。

所以

if(you don't want to change the NodeList during the follow-up script work){
    "use querySelectorAll"}
else if(you want to change the NodeList during the follow-up script work) {
    "use getElementsByTagName" 
}

您可以尝试在此示例中使用getElementsByTagName，您会发现它无法正常工作。

Answer 6

在此示例中：

<html> 
<head> 
    <meta charset="utf-8"> 
    <title>Yandex</title> 
</head> 
<body> 
    <a href="((http://yandex.ru))">Яндекс</a>, 
    <a href="((http://yandex.com))">Yandex</a> 
</body> 
<script>
    var elems1 = document.getElementsByTagName('a'), // return 2 lements, elems1.length = 2 
    elems2 = document.querySelectorAll("a");  // return 2 elements, elems2.length = 2 

    document.body.appendChild(document.createElement("a")); 

    console.log(elems1.length, elems2.length);  // now elems1.length = 3! 
                                                // while elems2.length = 2
</script>
</html>

创建的元素放置在script标记之后，并且querySelector无法读取。只有getElementsByTagName可以找到新元素。

Answer 7

对于那些更快搜索{strong>哪种方法getElementsByTagName或querySelectorAll 的人，我在这方面找到了不错的文章：

https://humanwhocodes.com/blog/2010/09/28/why-is-getelementsbytagname-faster-that-queryselectorall

querySelectorAll和getElementsByTagName有什么区别？

7 个答案: