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

Какие практики можно использовать для обработки отсутствия элементов при работе с ними на веб-странице? Например, вот такой псевдокод:

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?
  • 10 декабря 2023 г. 8:57
Ответы на вопрос 2 
В JavaScript существует несколько методов работы с DOM-элементами:

1. Методы для выбора DOM-элементов:
   - `document.getElementById("id")`: возвращает элемент с указанным идентификатором.
   - `document.getElementsByClassName("class")`: возвращает коллекцию элементов с указанным классом.
   - `document.getElementsByTagName("tag")`: возвращает коллекцию элементов с указанным тегом.
   - `document.querySelector("selector")`: возвращает первый элемент, соответствующий указанному селектору CSS.
   - `document.querySelectorAll("selector")`: возвращает все элементы, соответствующие указанному селектору CSS.

2. Методы для манипуляции с DOM-элементами:
   - `element.innerHTML = "html"`: устанавливает или получает содержимое элемента в виде HTML.
   - `element.innerText = "text"`: устанавливает или получает текстовое содержимое элемента.
   - `element.setAttribute("attr", "value")`: устанавливает значение атрибута элемента.
   - `element.getAttribute("attr")`: возвращает значение указанного атрибута элемента.
   - `element.classList.add("class")`: добавляет указанный класс элементу.
   - `element.classList.remove("class")`: удаляет указанный класс из элемента.
   - и другие методы.

Относительно обработки отсутствия элементов, проверки наличия элементов, атрибутов и т.д. являются нормальной практикой. В вашем примере псевдокода, проверки выполняются на каждом этапе, чтобы гарантировать наличие необходимых данных перед их использованием и избежать возможных ошибок при отсутствии элементов или атрибутов. Использование конструкции try...catch может быть полезным при обработке исключительных ситуаций, но в данном случае проверки наличия элементов являются более прямым и явным способом обеспечения корректной работы кода.
Свойство hash у объекта location всегда  присутствует. Может быть пустой строкой. 
 querySelector вернет null если ничего не найдет. 
 Таким образом половину проверок можно заменить одним вопросительным знаком:
Похожие вопросы
    Показать ещё