Мы все знаем DOM и его теоретическую сказку.
Давайте сразу перейдем к тому, чтобы увидеть это более практичным способом!
Это пользовательский интерфейс, шаблон для внедрения основ DOM.
Таким образом, мы все можем очень легко сделать этот шаблон, используя Bootstrap и некоторую базовую структуру HTML. Попробуйте один раз, иначе вот код для вас :-)
‹!DOCTYPE html›
‹html язык="ru"›
‹метакодировка="UTF-8›
‹meta name=”viewport” content=”width=device-width, initial-scale=1.0›
‹ссылка rel="таблица стилей" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css›
‹название›Курсы | JS ‹/название›
тело{
дисплей: гибкий;
выравнивание содержимого: по центру;
выравнивание элементов: по центру;
мин-высота: 100вх;;
}
#бтнн{
отображение: встроенный блок;
поле справа: 5px;
}
}
‹класс кузова=”bg-dark”›
‹div class=”контейнер bg-warning p4›
‹h1 class="text-center"›Изучите код сегодня!‹/h1›
‹ul class="list-group"›
‹класс li=”элемент-группы-списка”›
Курс Javascript ‹span class="float-right"›$2,1‹/span›
</li>
</ul>
‹тип кнопки=”кнопка” id=”btnn” класс=”btn btn1 btn-success btn-lg mt-4 mx-auto d-block sort-btn”›
Низкоуровневые курсы
‹тип кнопки = «кнопка» id = «btnn» class = «btn btn-primary btn-lg mt-4 mx-auto d-block hsort-btn»›
Курсы высокого класса
‹/дел›
‹! — ‹script src="app.js"›‹/script› →
‹/html›
Вы можете добавить в него несколько курсов, добавляя множество элементов ‹li› очень статично. Но что, если мы хотим использовать возможности JS для динамического внедрения в него элементов.
Давайте поймем магию app.js: -
Сначала нам нужно построить объект, состоящий, конечно же, из имени и цены. Это содержимое, которое будет динамически добавляться на веб-страницу.
Теперь ваша задача
- Сделать функцию
- Перебрать массив
- Создайте элементы списка и введите в него элементы списка.
Итак, в функцию generateResult().. мы сначала получаем элемент пользовательского интерфейса, а затем делаем html внутри ul равным пустому/пустому (для будущих целей, когда мы добавим кнопки на страницу.. подробно объясним позже).
Затем вы должны перебрать объект курсов, используя foreach с именем аргумента: курс и функцию обратного вызова ()=>{}, которая гласит:
- Создайте элемент ‹li› с помощью document.createElement().
- Добавьте в него имя класса, как предыдущий статический элемент li, который мы объявили выше, используя classList.add(‘name’)
- Теперь ‹li› должно состоять из названия курса, созданного с помощью createTextNode(object.name) .. , то есть курсы.название.
- После этого нам нужно добавить имя класса и название курса в ‹li›
- То же самое происходит и с ценой: сначала нам нужно создать в ней элемент ‹span›.
- Затем нам нужно добавить имя класса к элементу ‹span›, используя то же имя класса, которое мы использовали со структурой статической веб-страницы.. показано вверху.
- Теперь диапазон должен добавить цену, объявленную в объекте курсов, используя create TextNode(courses.price) с конкатенацией знака $
- Теперь вам нужно добавить эту цену в ‹span›
- А затем добавьте ‹span› к ‹li›
- И, наконец, ‹li› добавляется к ‹ul› с помощью appendChild().
Вот как страница выглядит сейчас:
Элементы списка вводятся в веб-страницу HTML динамически.
Теперь одна проблема заключается в том, что всякий раз, когда вы перезагружаете страницу, динамически вводимые элементы списка исчезают.
Таким образом, решение состоит в том, чтобы добавить к нему прослушиватель событий:
window.addEventListener("load", generateList);
Осталась функция Button, мы хотим, чтобы кнопки сортировали курсы по цене как по возрастанию, так и по убыванию.
поэтому кнопка захватывается с помощью document.querySelector(), и к ней присоединяется прослушиватель событий, так что, когда вы нажимаете кнопку, выполняется обратный вызов, где цены сортируются с использованием встроенной функции sort().
Метод arr.sort() используется для сортировки массива на месте в заданном порядке в соответствии с функцией compare().
arr.sort(compareFunction)
compareFunction: этот параметр используется для сортировки элементов по разным атрибутам и в другом порядке.
- функция сравнения (а, б) ‹ 0
- функция сравнения (а, б) › 0
- функция сравнения (а, б) = 0
Итак, это все основы DOM и его основы, которые служат базовым ядром для выполнения любой динамической операции на веб-странице!
Спасибо! Я надеюсь, что вы узнаете что-то из этого.
