Как правильно работать с DOM-элементами в JS?

Question

[Сергей]

Какие практики рекомендуется использовать при работе с элементами, чтобы в случае их отсутствия на странице код не "упал"? Например, есть следующий псевдокод:

async function getData() {
  const { hash } = window.location;

  if (!hash) return;

  const card = document.querySelector(`[data-id="${hash.substring(1)}"]`);

  if (!card) return;

  const { url } = card.dataset;

  if (!url) return;

  const response = await fetch(url);
  const data = await response.json();

  return data;
}

Это нормально использовать на каждом шаге проверки на наличие элемента, атрибута и т.д.? Может есть другие подходы? Использовать try...catch?

Comments

[godsplan]

document.querySelector('.foo')?.offsetHeight

[maksam07]

Как минимум вы упустили проверку для
const data = await response.json();
Потому что не всегда может быть в ответе json в силу разных обстоятельств.

Если вам не особо важна обработка каждой переменной, то вместо всех проверок можно просто запихнуть код в try...catch. Но я не эксперт, просто предлагаю варианты.

Answer 1

[Сергей delphinpro]

Свойство hash у объекта location всегда присутствует. Может быть пустой строкой.
querySelector вернет null если ничего не найдет.
Таким образом половину проверок можно заменить одним вопросительным знаком:

async function getData() {
    const url = document
        .querySelector(`[data-id="${window.location.hash.substring(1)}"]`)
        ?.dataset.url; // Вот здесь этот спасительный знак =)

    if (!url) return;

    const response = await fetch(url);
    const data = await response.json();

    return data;
}

Comments

[Сергей]

То есть по сути всё сводится к использованию оператора опциональной последовательности. Ок.

[Сергей delphinpro]

Сергей, в данном случае да.

[Сергей]

Ещё вопрос вдогонку. Правильно ли я понимаю, что следующая проверка длины излишняя, если в дальнейшем планируются использоваться исключительно методы или свойства NodeList?

function handleButtons() {
  const buttons = document.querySelectorAll('.btn');

  if (!buttons.length) return; // строка лишняя, так как forEach на пустом NodeList не выбрасывает исключений

  buttons.forEach(...);
}

[Сергей delphinpro]

Сергей, здесь эта проверка не нужна. Если коллекция пустая, то forEach просто ни разу не отработает.