用香草JS努力绑定和匹配DOM元素

Question

我更喜欢将我的所有DOM元素绑定在我的代码的顶部，这样ID或类引用仅被硬编码一次，即使该元素在代码中已多次使用。像这样：

var startButton = "#startButton";
var closeButtons = ".button.close";

与选择器（如document.querySelector）一起使用时效果很好。当我要将元素ID与上面的静态变量之一进行比较时（例如在click事件期间），就会发生挑战：

e.target.id == startButton

由于变量startButton包含尖锐字符，因此我必须执行以下操作：

e.target.id == startButton.replace('#', '')

这显然不是处理事物的理想方法，所以我想知道是否有更好的方法来绑定DOM元素以供以后使用？

请注意，我确实考虑过立即使用选择器来检索元素，例如document.querySelector，但这使我以后无法操纵这些元素。

编辑：上面的说明我错了。以后完全有可能操纵这些元素。因此，问题是将选择器存储在变量中还是将节点存储在变量中是更好的选择。如下所述，DOM元素在声明时可能不存在，因此最好将选择器存储在变量中，就像我上面所做的那样。

Answer 1

对于您问题中的特定示例，您可以使用.matches()：

if (e.target.matches(startButton))

.matches() DOM API以选择器作为参数。