Как отображать информацию в DOM

Одной из самых сложных для меня концепций, когда я только начал программировать, было то, как отображать информацию в DOM. Я мог наблюдать за тем, как это делают люди, и это имело смысл, когда я наблюдал за ними; но как только пришло время рисовать мой пустой файл index.js, мой разум был пуст. Как только я начал задавать себе больше вопросов «что и почему», концепция начала меняться. Вот как работал мой мыслительный процесс:

Шаг 1

Что: получение ваших данных.

Почему? Вам нужно с чем-то работать. Без данных далеко не уедешь.

Не забудьте запустить свой json-сервер, используя: json-server --watch db.json

document.addEventListener('DOMContentLoaded', function() {
fetch('http://localhost:3000/zodiacs')
.then(res => res.json())
.then(zodiacs => renderZodiacs(zodiacs))

Шаг 2

Что: отправлять данные в функцию.

Почему? Теперь, когда у вас есть данные, вам нужно что-то с ними сделать.

Начнем с простой функции renderZodiacs. Подумайте, что вы хотите, чтобы эта функция делала:

function renderZodiacs(zodiacs){
}

Шаг 3

Что: Определите переменные ваши переменные.

Почему: функция — это круто и все такое, но без инструкций по функциям она бесполезна. Определите переменные, которые выбирают правильные элементы HTML, соответствующие тому, куда вы хотите направить содержимое.

function renderZodiacs(zodiacs){
     const zodiacImage = document.querySelector('#zodiac-image')
     
     const zodiacName = document.querySelector('#zodiac-name')
     
     const zodiacElement = document.querySelector('#zodiac-element')
}

Шаг 4

Что: применить контент

Зачем: Теперь, когда мы указали переменным правильный HTML, нам нужно применить содержимое к DOM, указав переменным, где искать содержимое. Для изображений мы будем использовать .src, а для текстовой информации — .textContent. Сошлитесь на файл db.json, чтобы получить данные.

function renderZodiacs(zodiacs){
     const zodiacImage = document.querySelector('#zodiac-image')
     zodiacImage.src = zodiacs.image    
     
     const zodiacName = document.querySelector('#zodiac-name')
     zodiacName.textContent = zodiacs.name
     
     const zodiacElement = document.querySelector('#zodiac-element')
  
     zodiacElement.textContent = zodiacs.Element
}

На этом этапе вы должны увидеть свой контент, отображаемый в DOM, если нет, обязательно используйте console.log(), чтобы увидеть, где ваша ошибка.

Как отображать информацию в DOM