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的滞后，那就不那么重要了。如果相比之下，您将在每次过滤器更改时使用它，并且您希望用户每隔几秒钟更快地重新配置过滤器，那么滞后就会很重要。

除此之外，我相信你可以选择投入最少的时间。如果你可以肯定第一，不会被未来的升级打破它。

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

TL DR：唯一身份证，如果不是投入这么多时间，那么另一种方法。

Answer 2

我曾经有类似的问题，我使用后一个代码。因为我知道我正在使用的元素的ID。

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

所以我用了代码

document.getElementById("elementContainer" + containerId);

因为我知道元素的索引。

如果您不是这样，可以使用LOC

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

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

javascript id与类选择器嵌套

2 个答案: