DOM: поиск элементов и изменение текста
Как найти элемент страницы, обработать его отсутствие и безопасно обновить содержимое.
Основная идея
DOM представляет HTML-документ как дерево объектов. QuerySelector возвращает первый элемент, соответствующий CSS-селектору, или null. QuerySelectorAll возвращает статический список совпадений, который можно перебрать.
Проверьте, что элемент существует к моменту поиска. Скрипт может запускаться до разбора нужной части HTML; для обычного внешнего скрипта помогает defer. Для изменения обычного текста используйте textContent, чтобы строка не интерпретировалась как HTML.
Пример JavaScript
const output = document.querySelector("[data-result]");
if (output) {
output.textContent = "Материал найден";
}Пример ожидает элемент с атрибутом data-result. Если его нет, условие пропускает обновление без ошибки.
Частая ошибка
Самостоятельная проверка
Создайте в своём HTML абзац с data-result и выполните скрипт после разбора документа. Затем удалите абзац и проверьте отсутствие ошибки.
Код здесь показан для изучения. Встроенная песочница сайта выполняет только HTML/CSS. JavaScript проверяйте в собственном учебном файле или консоли своего тестового проекта; не вставляйте непонятный код на страницах с личными данными.
Следующие темы: события, CSS-классы.