6.3. Основы JavaScript: Работа с HTML/DOM элементами и массивами

 

Взаимодействие с HTML/DOM элементами

Теперь мы подошли к одной из интереснейших тем и вы сможете в полной мере ощутить пользу и мощь JavaScript при работе с веб страницей. Как вы знаете веб страница состоит из различных элементов — так называемых HTML тегов. Кроме того, к данным элементам присваивают различные CSS классы для изменения их стилей, как цвет, шрифт текста, окантовку и многое другое. Все эти элементы представляют собой определенную структуру, которая описывается с помощью DOM.

DOM, или Document Object Model (Модель объектов документа), в браузере - это программное представление веб-страницы или документа в виде иерархической структуры объектов, которые можно управлять и манипулировать с помощью JavaScript. DOM представляет собой древовидную структуру, в которой каждый элемент HTML-кода, такой как заголовки, параграфы, изображения, формы и другие, представлен как объект, атрибуты элементов - как свойства объектов, а содержимое - как текст или дочерние элементы.

DOM позволяет веб-разработчикам изменять содержимое, структуру и стили веб-страницы динамически, без необходимости перезагрузки страницы. Это делает взаимодействие с пользователем более интерактивным и улучшает пользовательский опыт.

JavaScript используется для доступа и манипулирования элементами DOM. Разработчики могут создавать, изменять, удалять элементы, изменять их атрибуты и стили, а также реагировать на события, такие как щелчки мыши и нажатия клавиш.

Доступ к элементам осуществляется посредством определенных параметров, например по имени тега, CSS класса и идентификатора. Для этого существует несколько методов (функций):

getElementById — получение элемента по его ID.

getElementsByClassName — получение всех элементов по присвоенному им имени CSS класса.

getElementsByTagName — получение всех элементов по определенному HTML тегу.

querySelector – универсальный метод получения одиночного элемента по любому атрибуту элемента (класс, ID, тег и другие).

querySelectorAll – универсальный метод получения всех элементов по любому атрибуту элемента (класс, ID, тег и другие).

 Внизу представлены примеры по использованию данных функций:

// Получение элемента по идентификаторуlet headerElement = document.getElementById("header");let headerElement = document.querySelector("#header");
// Получение элементов по классуlet button = document.getElementsByClassName("button");let button = document.querySelectorAll(".button");
// Получение элементов по тегуlet table = document.getElementsByTagName("table");let table = document.querySelectorAll("table");

 Практически во всех случаях данные функции используются с объектом document. Поэтому просто запомните это.

Теперь, когда мы получили необходимые элементы, мы можем менять их свойства и параметры.

Изменение стилей:

Вы можете изменять стили элементов с помощью свойства style. Например, чтобы изменить цвет фона элемента:

headerElement.style.backgroundColor = "blue";

 

Изменение содержимого:

Чтобы изменить текстовое содержимое элемента, вы можете использовать свойство textContent:

headerElement.textContent = "Привет, мир!";

 

Получение значения элементов:

Все HTML элементы могут иметь определенные атрибуты и свойства. Иногда возникает необходимость узнать их значения. Так как свойств и атрибутов очень много, то замонить их всех невозможно. Поэтому пользуются довольно простым приемом. После того, как вы получили элемент или группу элементов, выведите в консоль значение переменной с помощью функции console.dir():

Вывод элемента в консоли с помощью console.dir()

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

 

Результат будет отображен в виде дерева. На рисунке выше были выведены свойства элемента Input, в поле которого пользователь может вводить значения для дальнейшей обработки. Доступ к определенным свойствам достигается с помощью точки (.), например так:

let value = элемент.value  //Значение, введенное в поле ввода элементаlet height = элемент.style.height // Значение высоты элементаlet id = элемент.id  // Присовенное ID элемента

Упражнение 1. Ниже представлен фрагмент кода, который позволяет при нажати на кнопки изменять свойства прямоугольника (цвет, размер и текст внутри). Допишите код в выделенных местах, чтобы реализовать описанный функционал.

  

See the Pen Change style options by Easy-Network Easy-Network (@Easy-Network-Easy-Network) on CodePen.

 

Массивы

Массив в JavaScript - это специальная структура данных, которая позволяет хранить множество значений (чисел, строк, объектов и так далее) под одним общим именем. Массивы очень удобны, когда вам нужно хранить много информации и работать с ней.

Как создать массив?

Вы можете создать массив с помощью квадратных скобок []:

let числа = [1, 2, 3, 4, 5];

В этом примере числа - это массив, который содержит пять чисел.

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

Элементы массива нумеруются, начиная с нуля. То есть, первый элемент - это 0, второй - 1 и так далее. Вы можете получить доступ к элементу массива, указав его номер в квадратных скобках:

console.log(числа[0]); // Выведет 1console.log(числа[2]); // Выведет 3

Как добавить элемент в массив?

Вы можете добавить новый элемент в массив, используя метод push(). Вот как это делается:

числа.push(6);

Теперь массив числа содержит 6 элементов, и последний из них равен 6.

Как удалить элемент из массива?

Чтобы удалить элемент из массива, можно использовать метод pop(). Этот метод удаляет последний элемент из массива:

числа.pop();

Теперь массив числа содержит 5 элементов, и последний элемент (число 6) был удален.

Чем полезны массивы?

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

Пример: Работа с массивом:

let фрукты = ['яблоко', 'банан', 'апельсин'];
// Вывести количество элементов в массивеconsole.log(фрукты.length); // Выведет 3
// Добавить новый фруктфрукты.push('груша');
// Вывести все фрукты в массивеfor (let i = 0; i < фрукты.length; i++) {  console.log(фрукты[i]);}

В этом примере мы создали массив фрукты, добавили в него новый фрукт и вывели все фрукты с помощью цикла.

Упражнение 2. Дан массив numbers. Создайте функцию findMax, которая ищет максимальное число и передает его в функцию displayNumber, которая в свою очередь отображает его в указанном прямоугольнике. Вся операция начинается с нажатием кнопки «Старт».

 

See the Pen Task 2. Arrays by Easy-Network Easy-Network (@Easy-Network-Easy-Network) on CodePen.