Во-первых, я начну с разбивки кода JavaScript, в котором реализована модель DOM, чтобы познакомить нас с ее жаргоном...

const myImage = document.querySelector(“img”);
myImage.onclick = () => {
const mySrc = myImage.getAttribute(“src”);
if (mySrc === “images/cat.png”) {
myImage.setAttribute(“src”, “images/dog.png”);
} else {
myImage.setAttribute(“src”, “images/cat.png”);
}
};
`
  • Мы сохраняем элемент img в переменной myImage.
  • Мы инициализируем свойство обработчика событий (onClick) переменной myImage анонимной функцией. так что каждый раз, когда он щелкнул….

1.) Мы получаем значение атрибута SRC изображения.

2.) В коде используется условное выражение, чтобы проверить, равно ли значение SRC пути к исходному изображению:

  • Если это так, код изменяет значение SRC на путь к изображению собаки, заставляя изображение собаки загружаться внутри элемента img.
  • Если это не так (это означает, что оно должно было уже измениться), значение SRC возвращается к изображению кошки.

Другие важные выводы из DOM

  • Мы склонны использовать метод e.preventDefault(), чтобы убедиться, что он отменяет событие, если оно может быть отменено, а это означает, что действие по умолчанию, относящееся к событию, не произойдет.
  • Если вам нужно получить доступ к элементу, у которого нет идентификатора, вы можете использовать querySelector(), чтобы найти элемент с помощью любого селектора.
  • document.createElement(‘‹введите элемент›’) ==› Чтобы создать элемент
  • document.getElementById(‘‹введите идентификатор: например, #dog›’) ==› Чтобы получить элемент с этим конкретным идентификатором
  • document.querySelector(‘‹введите селектор: например, (.dog)›’) ==› Чтобы получить элемент, если у него нет идентификатора
  • document.getElementsByTagName(‘‹введите имя тега: например, (h1)’) ==› Чтобы получить элемент через его имя тега
  • myImage.getAttribute(‘введите атрибут’) ==›, если вы хотите получить значение src атрибута элемента, на который ссылается myImage.
  • bookDiv.classList.add('добавить') ==›

Чтобы добавить класс (добавить) в div (bookdiv), вы можете объявить класс и его свойства в таблице стилей и добавить их к любому элементу.

bookDiv.appendChild («вставить элемент»); ==› Чтобы добавить дочерний элемент в родительский (bookdiv) элемент

  • removeBtn.textContent = ‘Удалить’; ==› Чтобы добавить текстовое содержимое к элементу (removeBtn)