Во-первых, я начну с разбивки кода 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)