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

Question

I prefer to bind all my DOM elements at the top of my code so that the ID or class reference is only hard coded once, even though the element is used multiple times within the code. Something like this:

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

That works well with selectors, such as document.querySelector. The challenge occurs when I'm about to compare an element ID to one of the static variables above, like for instance during a click event:

e.target.id == startButton

Since the variable startButton contains a sharp, I would have to do something like this:

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

This is obviously not the ideal way of handling things, so I'm wondering if there's a better way to bind DOM elements for later use?

Please note that I did consider retrieving the elements using a selector right away, like document.querySelector, but that prevents me from manipulating the elements later on.

EDIT: My note above turns out to be wrong. It's totally possible to manipulate the elements later on. So the question is whether it's better to store selectors in variables, or to store nodes in variables. As pointed out below, the DOM element might not exist while it's being declared, so it might be better to store the selector in a variable, like I'm doing above.

Answer 1

For the specific example in your question, you can use .matches() :

if (e.target.matches(startButton))

The .matches() DOM API takes a selector as its argument.