<MyRusakov.ru />

Создание приложений для Android с нуля

Создание приложений для Android с нуля

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

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

Просмотрев данный курс и выполнив упражнения из него, Вы сможете создавать приложения любой сложности для самой популярной мобильной ОС в мире - Android.

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

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

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

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

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

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

Как получить элемент в JS

Как получить элемент в JS

Для того, чтобы производить какие-либо манипуляции с элементами HTML-страницы, необходимо их сперва получить. Сегодня мы научимся получать элементы в JS по тегу и классу.

Получить элемент по тегу

Задача 1: Получить все параграфы по тегу p.

<p>Параграф 1</p>
<p>Параграф 2</p>
<p>Параграф 3</p>

Переменной p присвоим все найденные параграфы на странице и выведем результат в консоль.

// Получить элементы по имени тега
let p = document.getElementsByTagName('p');
console.log(p);

Программа вывела в консоли коллекцию HTMLCollection, собирающая элементы по тегу, в виде массива (похожая на массив, но не массив) c тремя параграфами внутри, к каждому из которых можно обращаться через индекс (числа в квадратных скобках).

Как получить элемент в JS.

Мы получили возможность обратиться к нужному нам параграфу без создания отдельного класса или идентификатора.

Получить элемент по классу

Задача 2: Получить содержимое тега div по классу.

Для наглядности, мы создали один div с классом any и второй обычный блок.

<div class="any">Блок с классом</div>
<div>Обычный блок</div>

Переменной div присвоим все найденные на странице элементы с классом any и выведем результат в консоль.

// Получить элементы по имени класса
let div = document.getElementsByClassName('any');
console.log(div);

Как и ожидалось, программа проигнорировала обычный div и вывела в массиве только div с классом, так и должно быть.

Как получить элемент в JS.

HTMLCollection коллекция

HTMLCollection представляет себя псевдомассив элементов, который возвращают в виде объекта, метод getElementsByTagName(). Что у неё общего с массивом? Это возможность в цикле методом перебора обращаться к элементам через индекс (порядковый номер), однако в HTML коллекции нельзя использовать методы массива, такие как pop(), push() или join().

Какая польза от HTML коллекции?

У HTMLCollection есть замечательное свойство length. Свойство length показывает, сколько элементов находится в коллекции. Что это значит на практике? Например, я хочу при клике по кнопке, изменить цвет всех параграфов. Как заставить отработать событие onclick все теги, учитывая, что их количество может меняться?

Обращение ко всем элементам

Задача 3: Изменить цвет у всех элементов при клике.

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


HTML код

<p>Параграф 1</p>
<p>Параграф 2</p>
<p>Параграф 3</p>
<button onclick="colorFunction()">Изменить цвет</button>

JavaScript код

Цикл for запускает счетчик (переменная i) от 0 до максимального значения длины (свойство length), с каждым новым разом, переменная i увеличивается на единицу и так продолжается до тех пор, пока счетчик i в процессе прирастания на единицу, остается меньше длины length.

function colorFunction() {
  let pCollection = document.getElementsByTagName("p");
  let i;
  for (i = 0; i < pCollection.length; i++) {
    pCollection[i].style.backgroundColor = "pink";
  }
}

Как получить элемент в JS.

Персональное обращение к элементам

Задача 4: Изменить цвет только у второго параграфа при клике.

Здесь, мы конкретно обращаемся, через нумерованный индекс (число в квадратных скобках), ко второму элементу коллекции.

function colorFunction() {
  let pCollection = document.getElementsByTagName("p");
  pCollection[1].style.backgroundColor = "pink";
}

У второго параграфа при клике, изменился цвет.

Как получить элемент в JS.

Итоги

Знания о том, как получить элементы в JS, являются – базовыми при создании эффектов или приданию динамики у веб-сайтов.

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

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