Как проверить, существует ли элемент в видимом DOM

Поиск элемента в DOM по его идентификатору — обычная задача в JavaScript. Однако что, если вам нужно проверить существование элемента без использования этого метода?

Идентификация невидимых элементов

Когда элемент удаляется из DOM, его ссылка в переменной JavaScript по-прежнему сохраняется. существует. Это может привести к неожиданным результатам при проверке существования элемента с использованием typeof или === null.

Текущий подход

Функция isNull() пытается обойти эту проблему, временно устанавливая случайный идентификатор элемент, найдя его с помощью getElementById(), а затем удалив временный идентификатор. Этот подход возвращает true, если элемент не найден в DOM, и false, если он найден.

Упрощение проверки существования

Если цель состоит в том, чтобы просто проверить, существует ли элемент (независимо от его видимость), более простой подход — использовать любой из методов выбора элемента браузера:

var elementExists = document.getElementById("find-me");

Для логического значения значение, вы можете использовать !! перед вызовом метода выбора. Кроме того, можно использовать такие методы, как querySelector() и getElementsByTagName().

Проверка видимости в DOM

Чтобы конкретно проверить, существует ли элемент в видимом DOM, можно использовать метод contains() можно использовать:

document.body.contains(someReferenceToADomElement);

Этот метод возвращает true, если элемент присутствует в DOM, и false в противном случае.