Артём Мáлков

Как проверить существование (наличие) элемента на странице (в DOM) на JavaScript/jQuery?

28 окт1 коммАртём Мáлков

Раньше, когда мой путь веб-программиста только начинался, я писал код (на 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, тег и прочие.

Рекомендуем к просмотру
Как отследить вертикальное направление прокрутки страницы/элемента на JavaScript/jQuery?
Посты
Как добавить несколько обработчиков событий addEventListener() к одному элементу в JavaScript?
Статьи и советы
Проверяем наличие класса у элемента на jQuery/JavaScript
Посты
1
комментарий
Форма комментирования этого поста скрыта. Авторизуйтесь, чтобы расширить привилегии гостевого посещения и получить необходимую помощь от сообщества Pandoge.
    • 2
    1080
      •  Команда Pandoge
    изменено 28 окт в 00:42

    Совсем забыл сказать, что помимо наличия элемента на странице свойство length в jQuery содержит в себе общее количество (число) найденных элементов. Проверить это можно следующим образом:

    alert("Наденных элементов: "+$(".element_class").length); // element_class - CLASS нужного элемента

    В JavaScript проверку на наличие элемента (как и доступное их число на странице) так же можно осуществить с помощью уже знакомого вам свойства length:

    var element = document.getElementsByClassName("element_class").length; // element_class - CLASS нужного элемента
    
    if(element) {
    	
    	// Действие, если элемент есть
    	
    } else {
    	
    	// Действие, если элемента нет
    
    }
Подняться наверх
Регистрация на сайте
Pandoge - уникальный проект, который собрал на своих страницах большой опыт многих людей в сфере сайтостроения.Присоединяйся и ты к сообществу, получай неограниченные знания и начинай творить свою мечту!Нажимая кнопку «Регистрация» вы даете согласие на обработку своих персональных данных.
Имя и фамилия
E-mail
Логин
Пароль
Регистрация
Pandoge