Как дизайнеры, а не дизайнеры, большинство из нас мало разбирается в коде, но нам нужны некоторые знания основ, чтобы лучше понимать, как работает Интернет и как мы можем с ним взаимодействовать. В этом посте я научу вас основам использования Javascript, наиболее часто используемого языка для веб-разработки, для создания из базового HTML-шаблона действительно хорошего и функционального проекта.
Во-первых: понимание того, что мы здесь будем делать
В этом посте я научу вас, как переключать классы, выбирать HTML-элемент и добавлять HTML-теги в ваш шаблон. Для этого мы будем использовать основы обхода DOM.
Что такое DOM? Вы можете спросить… Согласно w3schools «… Объектная модель документа (DOM) - это не зависящий от платформы и языка интерфейс, который позволяет программам и скриптам динамически получать доступ и обновлять содержимое, структуру и стиль документа. ” Другими словами, это структура документа, к которой мы можем получить доступ и изменить.
Во-вторых: Теперь я знаю, что буду делать… Как мне это сделать?
Хорошо, молодой падаван, вот как мы можем получить элемент из DOM: используя «document.getElementById (‘ example ’)».
Давайте разберемся с этим. Первая часть - это «документ», и в основном мы говорим «во всем этом документе (файле index.html)». Я хочу, чтобы вы что-то сделали, в данном случае , получаем элемент по идентификатору, и мы можем получить элемент не только по идентификатору, мы можем использовать «.getElementByClass ('')» и «. getQuerySelector ('')», последний вам нужно указать, если это класс, используя «. затем класс, на который нужно настроить таргетинг, или идентификатор «#».
Вторая часть - это переключение класса, и для этого у нас есть много вариантов, но мы будем использовать только «.addClass» & «. removeClass ». Это простой способ добавления класса и удаления другого, например, когда пользователь нажимает кнопку, фон которой должен быть изменен с красного на синий, сначала вы удаляете класс с помощью «. removeClass ('red') », а затем добавьте класс blue « .addClass ('blue') ».
Теперь мы знаем, как получить элемент DOM и изменить его класс, но знаем, что я хочу добавить абзац, когда пользователь нажимает эту кнопку, которая меняет фон с красного на синий, как мне это сделать? ?
Сначала мы создаем элемент, для этого используем «document.createElement ('p')», затем добавляем внутрь HTML « .innerHTML ('Lorem Ipsum yu do dis') », после чего мы вставляем новый элемент в DOM с помощью « .push ( 'элемент создан') » и все!
Не волнуйтесь, я раскрою, что там было за волшебство.
Мы создаем новый тег абзаца с помощью «.createElement ('p')», вы можете создать любой элемент DOM, который хотите, используя этот метод. . После создания этого элемента мы добавили в него HTML с тегом «.innerHTML (« поместите сюда все, что хотите »)». Теперь у меня есть тег «‹p› ‹/p›» с небольшим количеством HTML внутри, затем вам нужно отправить его в DOM (см., Push - это способ добавьте что-то внутри DOM, массив, объект, вы его называете, мы узнаем больше о том, что такое массив и объект дальше) с помощью «.push () ” внутри скобок находится созданный вами тег« p ». Надеюсь, вы сохраните его в переменной с помощью метода « let p = document.createElement ('p') ” например.
Что ж, я знаю, что это может быть много для первого раза, но вот основы того, как Javascript работает с DOM и как вы можете манипулировать им по своему усмотрению, молодой падаван, это дроидов, которых ты где ищешь.
