Изо всех сил пытается связать и сопоставить элементы DOM с ванильным JS - PullRequest
2 голосов
/ 29 марта 2019

Я предпочитаю привязывать все мои элементы DOM вверху моего кода, чтобы идентификатор или ссылка на класс кодировались только один раз, даже если этот элемент используется в коде несколько раз.Примерно так:

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

Это хорошо работает с селекторами, такими как document.querySelector.Проблема возникает, когда я собираюсь сравнить идентификатор элемента с одной из статических переменных выше, как, например, во время события щелчка:

e.target.id == startButton

Поскольку переменная startButton содержит резкое значение, мне придетсясделать что-то вроде этого:

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

Это, очевидно, не идеальный способ обработки вещей, поэтому мне интересно, есть ли лучший способ связать элементы DOM для последующего использования?

Пожалуйстаобратите внимание, что я рассмотрел возможность извлечения элементов с использованием селектора сразу, например, document.querySelector, но это не позволяет мне позже манипулировать элементами.

РЕДАКТИРОВАТЬ: Моя заметка выше оказываетсябыть неправым.Вполне возможно манипулировать элементами позже.Поэтому вопрос в том, лучше ли хранить селекторы в переменных или хранить узлы в переменных.Как указано ниже, элемент DOM может не существовать во время его объявления, поэтому может быть лучше сохранить селектор в переменной, как я делал выше.

1 Ответ

3 голосов
/ 29 марта 2019

Для конкретного примера в вашем вопросе вы можете использовать .matches():

if (e.target.matches(startButton))

DOM API .matches() принимает селектор в качестве аргумента.

...