JavaScript ID vs.class 选择器嵌套

Question

如果我有以下代码

<div id="container1">
   <div id="elementcontainer1" class="elementType"></div>
</div>
<div id="container2">
   <div id="elementcontainer2" class="elementType"></div>
</div>

要查找属于特定容器的元素，我可以首先选择正确的容器，然后在其中按类选择正确的类型：

document.getElementById(containerId).getElementsByClassName("elementType")

或者我可以在元素中指定它属于哪个容器：

document.getElementById("element" + containerId)

后者会更快，因为它直接进入正确的 id，但另一方面，我需要为每个定义不同的 id，尽管组件在其他方面是相同的。

选择使用哪一个时应考虑哪些方面？

Answer 1

首先，考虑一下您将使用它多少以及DOM有多大。 因为如果您在DOM中放置100k元素，无论您的选择器如何，它都会延迟于渲染。例如，如果要完成一次或两次，并且只带来大约 1-5 X 100ms 的延迟，那就不是那么重要了。如果相比之下，您将在每次过滤器更改时使用它，并且您希望用户每隔几秒钟更快地重新配置过滤器，那么延迟将很重要。

除此之外，我相信你可以选择你投入时间最少的任何一个。如果你能肯定1st不会被未来的升级打破，那就去吧。

另一方面，如果你有一种简单的方法来枚举每个端，每个端都有唯一的id，我总是更愿意直接定位，更快，更容易调试，不太可能被更新破坏。

TL DR：唯一的 Id，如果不是投入大量时间，否则是另一种方法。

Answer 2

我曾经遇到过类似的问题，我使用了后一种代码。因为我知道我正在使用的元素的 ID。

后端逻辑将迭代并打印所有行，并附加到值/id 与行相同的行的按钮。

所以我使用了代码

document.getElementById("elementContainer" + containerId);

正如我知道元素的索引一样。

如果不是这种情况，您可以使用 LOC

document.getElementById(containerId).getElementsByClassName("elementType")

要访问您的元素，实际上取决于您要使用哪个代码。同时，正如@CBroe评论中所述，对于大多数用例，速度差异几乎可以忽略不计。