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

Question

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

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

这适用于选择器，例如 document.querySelector。当我要将元素 ID 与上面的静态变量之一进行比较时，就会出现挑战，例如在单击事件期间：

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 将选择器作为参数。

Struggling to bind and match DOM elements with vanilla JS