document.querySelector的主要优点是易于使用更复杂的CSS查询。

const loginFields = document.querySelector("form.login input");
if (loginFields.some((field) => field.value.trim() === "") {
    alert("Please fill in all fields");
}

另一种方法是使用document.getElementsByClassName和Element.getElementsByTagName。

const loginFields = document.getElementsByClassName(".login")[0]
    .getElementsByTagName("input");
if (loginFields.some((field) => field.value.trim() === "") {
    alert("Please fill in all fields");
}

正如你可能已经注意到的，你经常会将返回结果存储到一个常量/变量中。你（通常）不应该在for/while循环中调用这个。
关于(archived) performance test，它看起来很不公平，因为除了类测试之外的所有测试都将运行两个查询。

所以我决定做更多的测试。在该页面的HTML中，我将id“codeOne”添加到类为“code”的第一个元素中。

我做了四个测试。

从这些测试结果中，我可以得出结论，**getElementById using id（691 ms）**是明显的赢家，querySelector using id（749 ms）排在第二位。这是因为id很容易查找，因为浏览器从Internet Explorer复制了此功能，Internet Explorer是过去最占主导地位的浏览器。你甚至可以把id当作变量来使用。

请不要这样做，因为它的可读性较低。它也不是更快。
我们看一下使用class进行的测试，可以看到getElementsByClassName（778 ms）和querySelector（1460 ms）之间的性能差异非常大。这是因为前者只会查找className，而后者会做一些额外的检查，因为它可以使用像'#id.class[attr=“value”]'或“form > input”这样的复杂查询。
最后一个结论是，您可以对一个元素使用document.querySelector，对多个元素使用document.querySelectorAll，这只是为了简单起见，因为任何CSS查询都可以工作。函数getElementById和getElementsByClassName（以及getElementsByTagName，不包括在内）在理论上应该总是更快，但在实践中这不应该影响网站的性能。你（可能）不会在循环中调用这些函数，所以你可以把结果存储在一个变量中。