DOM

Веб-страница - это документ. Этот документ может отображаться в окне браузера или в качестве источника HTML. Но это один и тот же документ независимо от того, как вы с ним взаимодействуете.

DOM - объектная модель документа - это абстракция, которая представляет структуру контента в Интернете. Мы можем манипулировать DOM в зависимости от поведения пользователя.

Основы веб-программирования

Согласно методологии школы Flatiron, веб-программирование стоит на трех столпах:

  • Распознавать события
  • Общайтесь с сервером
  • Управляйте DOM

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

События

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

Сначала нам нужно выбрать элемент HTML, который представляет кнопку, которую пользователь нажимает.

let categoriesLI = document.querySelector(‘#categories’)
categoriesLI.addEventListener(‘click’, event => {renderCategoryList(event)})

В этом примере мы выбираем элемент LI с категориями идентификаторов и назначаем его переменной categoryLI. Затем мы добавляем к этому элементу прослушиватель событий. И мы указываем тип события, в данном случае это его щелчок.

Когда пользователь щелкает элемент с категориями идентификаторов, он запускает функцию renderCategoryList, и мы передаем данные события аргументу этой функции.

Связь с сервером

После срабатывания события нам нужно описать, что будет дальше. Вероятно, мы захотим манипулировать DOM. Но сначала давайте получим новые данные с сервера, которые мы собираемся вставить в DOM.

fetch(‘http://localhost:3000/categories')
.then(r => r.json())
.then(respond => {…………}

Мы собираемся использовать fetch для отправки запроса GET на целевой URL. После отправки запроса мы получим ответ от сервера. Также мы собираемся использовать функцию «then», чтобы дождаться возврата сервера в качестве ответа, потому что возвращаемое значение выборки - «обещание». Нам нужно преобразовать эти данные во что-то читаемое, в нашем случае мы собираемся преобразовать данные в json. А когда у нас есть json, мы можем использовать его для управления DOM.

Манипулировать DOM

Отлично, мы распознали событие, отправили запрос на сервер и получили данные с сервера для чтения. Пришло время изменить модель DOM.

fetch('http://localhost:3000/categories')
.then(r => r.json())
.then(respond => {
  respond.forEach(item => {
    let li = document.createElement('LI')
    li.innerText = item.name
    li.setAttribute('data-id' , item.id)
    li.addEventListener('click', event => {renderProductsList(event)})
    categoriesUl.append(li)
  })
})

После конвертации мы получили массив объектов. Чтобы получить доступ ко всем объектам и вставить их в DOM, нам нужно перебрать этот массив user forEach function. А затем мы можем создавать новые элементы HTML, вставлять в них данные из ответа сервера и его атрибуты, а затем добавлять их в DOM.

Пример с другим типом запросов

Пока мы отправляли только запрос GET. Но как мы можем отправить запрос POST или PATCH на сервер и динамически видеть новые данные без необходимости обновлять страницу.

POST

Допустим, у нас есть эта форма, в которой пользователь может ввести некоторые данные:

<form id="new-quote-form">
      <div class="form-group">
        <label for="new-quote">New Quote</label>
        <input type="text" class="form-control" id="new-quote"  placeholder="Learn. Love. Code.">
      </div>
      <div class="form-group">
        <label for="Author">Author</label>
        <input type="text" class="form-control" id="author"  placeholder="Flatiron School">
      </div>
      <button type="submit" class="btn btn-primary">Submit</button>
</form>

Выбор формы ввода и отправка POST-запроса на сервер:

const selectForm = document.querySelector('#new-quote-form')
selectForm.addEventListener('submit', e => {
  e.preventDefault()
let author = e.target.author.value
  let input = document.querySelector('#new-quote')
  input.name = "pavel"
let newQuote = e.target['new-quote'].value
fetch(getUrl, {
    method: 'POST',
    headers: {
      'Content-type':'application/json',
      'Accept':'application/json'
    },
    body: JSON.stringify({
      author: author,
      quote: newQuote,
      likes: '0'
    })
  })

Манипулирование DOM после того, как пользователь отправит его ввод:

  .then(r => r.json())
  .then(resp => {
    debugger
    let li = document.createElement('LI')
    let pLike = document.createElement('P')
    li.innerText = resp.quote
    pLike.innerText = `Likes: ${resp.likes.length}`
    selectUl.append(li, pLike)
  })
})

ПАТЧ

Запрос PATCH очень похож на POST, но вместо создания новой строки в базе данных мы изменяем конкретную ячейку выбранной строки.

В следующем примере мы просто меняем текущее логическое значение атрибута isGooddog объекта dog на противоположное, если был запущен прослушиватель событий.

dogButton.addEventListener("click", (event) => {
dog.isGooddog = !dog.isGooddog
fetch(`http://localhost:3000/pups/${event.target.id}`, {
                method: "PATCH",
                headers: {
                    "Content-Type": "application/json",
                    "Accept": "application/json"
                },
                body: JSON.stringify({
                    isGooddog: dog.isGooddog
                })
            })
            .then(r => r.json())
            .then(response => {
                if (response.isGooddog) {
                    dogButton.innerText = "Good Dog!"
                } else {
                    dogButton.innerText = "Bad Dog!"
                }
            })
        })

УДАЛИТЬ

Запрос на удаление довольно прост. Наиболее важно указать «метод» и выбрать правильный RESTful-маршрутизацию. И, конечно же, мы не должны забывать манипулировать DOM после обработки запроса.

function deleteReview(event){
  fetch(`http://localhost:3000/reviews/${event.target.id}`, {
    method: 'DELETE'
  })
  let button = document.getElementById(event.target.id)
  button.parentElement.remove()
}

Заключение

JavaScript подобен огню: если вы знаете, как с ним разговаривать, он поможет вам пережить следующую зиму, в противном случае он сожжет вашу DOM.