Как проверить существование (наличие) элемента на странице (в DOM) на JavaScript/jQuery?
Раньше, когда мой путь веб-программиста только начинался, я писал код (на JavaScript или jQuery), не учитывая некоторых нюансов, в числе которых, как вы могли догадаться из заголовка – наличие того или иного задействованного элемента на странице в DOM.
При некоторых обстоятельствах, подвязываясь (обращаясь) к тому или иному элементу, которого по факту на странице нет, вы можете столкнуться, например, с ошибкой:
Uncaught TypeError: document.getElementById(...) is null
Чтобы избежать её (и другие) и не доставить неудобств посетителям вашего сайта, ввиду возможной некорректной его работы, проделайте следующие рекомендации.
На самом деле, решений этой задачи существует несколько, поэтому в посте я покажу те, которые использую сам лично.
Условие существования (наличия) элемента на странице (в DOM) на JavaScript
Если вы используете ID в качестве идентификатора для поиска элемента на странице, то можно воспользоваться следующей несложной конструкцией:
var element = !!document.getElementById("element_id"); // element_id – ID нужного элемента
if(element) {
// Действие, если элемент есть
} else {
// Действие, если элемента нет
}
В остальных случаях, например, классе, используйте следующую конструкцию:
var element = document.body.contains(document.getElementsByClassName("element_class")[0]); // element_class - CLASS нужного элемента
if(element) {
// Действие, если элемент есть
} else {
// Действие, если элемента нет
}
Другие варианты составления условий вы найдёте здесь.
Условие существования (наличия) элемента на странице (в DOM) на jQuery
В jQuery задачу по определению наличия элемента на странице я решаю с помощью свойства «length»:
var element = $(".element_class").length; // .element_class - CLASS нужного элемента
if(element) {
// Действие, если элемент есть
} else {
// Действие, если элемента нет
}
Здесь в качестве идентификатора (в моём случае это класс) может выступать ID, тег и прочие.