<MyRusakov.ru />

Создание игр на Unreal Engine 4

Создание игр на Unreal Engine 4

Данный курс научит Вас созданию игр на Unreal Engine 4. Курс состоит из 12 модулей, в которых Вы с нуля освоите этот движок и сможете создавать самые разные игры.

В курсе Вы получите всю необходимую теоретическую часть, а также увидите массу практических примеров. Дополнительно, почти к каждому уроку идут упражнения для закрепления материала.

Помимо самого курса Вас ждёт ещё 5 бесплатных ценных Бонусов: «Динамическая смена дня и ночи», «Создание динамической погоды», «Создание искусственного интеллекта для NPC», «Создание игры под мобильные устройства» и «Создание прототипа RPG с открытым миром».

Подробнее
Подписка

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

YouTube Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Поиск нескольких элементов по названию класса

Поиск нескольких элементов по названию класса

Мы получили задание заменить в рекламном тексте на HTML странице все упоминания о «кухни» на слово «гостиной». Причем вручную пройтись по всем страницам и заменить в HTML коде, не вариант. На клиентском сайте 50+ таких страниц и в этом случае JavaScript нам поможет.


Поиск нескольких элементов по названию класса.

На странице есть несколько слов «кухни». Все они заключены в тег span с классом home. Мы можем получить все теги span или все классы home. Но безопаснее работать с уникальными классами, чем с тегами.

// HTML код
<div class="container">
    <h1 id="heading">Комплексы для дома</h1>
    <p class="text">Предметы мебели, которые подойдут для вашей <span class="home">кухни</span>. Типовые комплекты для создания <span class="home">кухни</span> вашей мечты.</p>
</div>

Шаг 1) Найти все классы home

Отбираем все классы с помощью метода getElementsByClassName (получить элементы с помощью класса).

Сначала объявим переменную homeNodes, в ней мы будем хранить набор элементов с классом home. На то, что элементов будет несколько, как-бы намекает буква s (множественное число) на конце названия переменной. Затем вызовем метод getElementsByClassName с аргументом в скобках. В скобках мы указываем название класса, который ищем.

let homeNodes = document.getElementsByClassName('home');

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

console.log(homeNodes);

Поиск нескольких элементов по названию класса.

Если в консоли браузера отобразились нужные объекты, значит элементы нашлись. Когда в консоль выводится сразу несколько элементов, то они объединяются в HTML Collection. HTML коллекция очень напоминает массив и позволяет перебирать элементы по индексу - номеру в квадратных скобках. С помощью квадратных скобок можно выводить в консоль каждый элемент в отдельности.

//Выводит первый элемент (отсчет ведется с нуля)
console.log(homeNodes[0]);


Поиск нескольких элементов по названию класса.


//Выводит второй элемент коллекции
console.log(homeNodes[1]);


Поиск нескольких элементов по названию класса.

В консоли отладчика, мы можем убедится на каждом шаге, что получили именно то, что хотели.


Шаг 2) Изменить полученные элементы

Свойство innerHTML само по себе (вне цикла) не подходит для замены текста внутри нескольких элементов набора, поскольку оно может изменить содержимое только одного элемента.

// Так не работает
homeNodes.innerHTML = 'гостиной';

Изменить текст внутри каждого элемента можно внутри цикла for. Установим переменную счетчик i с нулевым значением. Цикл будет повторяться столько раз, сколько имеется элементов. После прохождения каждого элемента (итерации), увеличим индекс на единицу. Так мы пройдем по всем элементам в коллекции, пока они не закончатся (i меньше длины коллекции) и присвоим каждому из них через свойство innerHTML, с нужным словом.

let homeNodes = document.getElementsByClassName('home');
    for (let i = 0; i < homeNodes.length; i++) {
        homeNodes[i].innerHTML = 'гостиной';
}

Все получилось! Слова «кухни» заменились на «гостиной». Что-бы, что-нибудь изменить в HTML коллекции, нужно перебрать элементы набора в цикле for.


Поиск нескольких элементов по названию класса.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (2):

MisterSQL MisterSQL 28.12.2015 01:27:10

Good епт!

Ответить

irinasaf89 irinasaf89 02.04.2021 16:41:25

Недавно начала изучать JS и нашла у Вас на сайте ответы на несколько своих вопросов, хочу сказать спасибо!

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.