<MyRusakov.ru />

Программирование на C++ с Нуля до Гуру

Программирование на C++ с Нуля до Гуру

Данный курс научит Вас программировать на языке C++, который, несмотря на свой почтенный возраст, необычайно сильно востребован. Курс состоит из 6 разделов, посмотрев которые и выполнив все упражнения, Вы с нуля освоите этот язык и сможете создавать самые разные проекты любой сложности на C++.

Для закрепления материала из уроков к ним идёт множество упражнений.

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

Также вместе с курсов Вы получаете Бонус "Программирование на C++ в Unreal Engine", в котором Вы научитесь создавать игры на C++ с использованием этого движка.

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

Подпишитесь на мой канал на 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 и нашла у Вас на сайте ответы на несколько своих вопросов, хочу сказать спасибо!

Ответить

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