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

【问题标题】：Struggling to bind and match DOM elements with vanilla JS努力使用 vanilla JS 绑定和匹配 DOM 元素
【发布时间】：2019-03-29 16:56:18
【问题描述】：

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

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

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

e.target.id == startButton

由于变量 startButton 包含一个尖锐的，我将不得不做这样的事情：

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

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

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

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

【问题讨论】：

【解决方案1】：

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

if (e.target.matches(startButton))

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

【讨论】：

不错。关于这一点我唯一要注意的是必须提前知道您是在将 ID 与 ID 进行比较，而不是将 ID 与类进行比较等。
@Lewis 是的，当然；在 OP 的做事方案中，跟踪特定的选择器似乎很重要。我不知道为什么，但如果选择器用于find 事物，它们也可以通过.matches() 用于check 元素。
这很好用！什么会更好：将 ID 和类存储在变量中？或者使用选择器立即检索元素，例如 document.querySelector？
@Chris 这取决于应用程序。我倾向于进行大量动态 DOM 更新，因此将选择器保存在变量中对我来说是一种常见的模式（以避免愚蠢的拼写错误和类似的事情）。我使用 jQuery，所以我会使用 .is() 而不是 .matches()，但它们几乎相同。
@Chris 因为在声明变量时节点可能不存在于 DOM 中。