Это второй параграф.
JavaScript: От Основ до Full-Stack Разработки
- -
- 100%
- +
С указанием даты и времени: Аргументы можно передавать в разном формате, но самый надежный — это комбинация числовых значений.javascript// new Date(год, месяц, день, час, минута, секунда, миллисекунда)
// Месяцы нумеруются с 0 (январь) до 11 (декабрь)!
let specificDate = new Date(2023, 10, 21, 14, 30, 0, 0); // 21 Ноября 2023, 14:30:00
console.log(specificDate); // Выведет: Tue Nov 21 2023 14:30:00 GMT+0000 (Coordinated Universal Time) - формат может отличаться
Важно: Месяцы в Date нумеруются с 0 (январь) по 11 (декабрь). Это частый источник ошибок.
С указанием строки: Можно передать строку, но формат строки может интерпретироваться по-разному разными браузерами, поэтому этот способ менее надежен.javascriptlet dateFromString = new Date("2023-11-21T14:30:00"); // ISO 8601 формат, более надежный
console.log(dateFromString);
Получение компонентов даты и времени:
Объект Date имеет множество методов для получения отдельных частей даты/времени:
getFullYear(): Возвращает год (4 цифры).
getMonth(): Возвращает месяц (0-11). Помните про 0-индексацию!
getDate(): Возвращает день месяца (1-31).
getDay(): Возвращает день недели (0 - воскресенье, 1 - понедельник, …, 6 - суббота).
getHours(): Возвращает час (0-23).
getMinutes(): Возвращает минуты (0-59).
getSeconds(): Возвращает секунды (0-59).
getTime(): Возвращает количество миллисекунд, прошедших с 1 января 1970 года (Unix Timestamp). Полезно для сравнения дат или измерения интервалов.
javascript
let myDate = new Date(2024, 0, 15, 10, 0, 0); // 15 Января 2024, 10:00:00
console.log("Год:", myDate.getFullYear()); // 2024
console.log("Месяц:", myDate.getMonth()); // 0 (Январь)
console.log("День месяца:", myDate.getDate()); // 15
console.log("День недели:", myDate.getDay()); // 1 (Понедельник)
console.log("Час:", myDate.getHours()); // 10
console.log("Минуты:", myDate.getMinutes()); // 0
console.log("Секунды:", myDate.getSeconds()); // 0
console.log("Timestamp:", myDate.getTime()); // Большое число миллисекунд
Установка компонентов даты и времени:
Также есть методы для установки значений:
setFullYear(year)
setMonth(month)
setDate(date)
setHours(hours, minutes, seconds, ms) (можно установить все сразу)
setTime(milliseconds)
javascript
let today = new Date();
today.setFullYear(2025);
today.setMonth(0); // Устанавливаем январь
today.setDate(1);
console.log(today); // Дата станет 1 Января 2025 года
Сравнение дат:
Даты можно сравнивать, используя обычные операторы сравнения (<, >, <=, >=). Сравнение происходит по их значению в миллисекундах (getTime()).
javascript
let date1 = new Date(2024, 0, 15);
let date2 = new Date(2024, 0, 16);
if (date1 < date2) {
console.log("date1 раньше date2"); // Выполнится
}
Практическое задание:
Создайте массив studentScores с несколькими числами (оценками).Добавьте новую оценку в конец массива с помощью push().
Удалите последнюю оценку с помощью pop() и сохраните ее в переменной droppedScore.
Добавьте оценку 100 в начало массива с помощью unshift().
Удалите первую оценку с помощью shift() и сохраните ее.
Используйте splice(), чтобы заменить оценку с индексом 2 на 95.
Используйте slice(), чтобы создать новый массив topScores из двух лучших оценок (предполагая, что они в конце массива).
Используйте includes(), чтобы проверить, есть ли в studentScores оценка 70.
Используйте indexOf() для поиска первой оценки 80.
Используйте join() для преобразования массива studentScores в строку с разделителем “-“.
Переберите массив studentScores с помощью forEach() и выведите каждую оценку.
Создайте объект bookInfo со свойствами title, author, publicationYear, genre.Выведите название книги, используя точечную нотацию.
Выведите автора, используя скобочную нотацию и переменную propertyName = "author".
Измените publicationYear на более поздний.
Добавьте новое свойство isBestseller со значением true.
Удалите свойство genre.
Используйте for...in для перебора оставшихся свойств объекта и вывода их в консоль.
Используйте Object.values() для получения массива значений объекта и выведите его.
Используйте Object.entries() для получения пар ключ-значение и переберите их с помощью forEach() и деструктуризации.
Используя Math.random(), Math.floor() и Math.max(), Math.min(), напишите функцию getRandomInt(min, max), которая возвращает случайное целое число в заданном диапазоне (включая min и max).
Создайте объект userProfile со свойствами firstName, lastName. Напишите метод getFullName(), который возвращает полное имя, используя this.
Создайте объект currentDate типа Date.Выведите текущий год, месяц (не забудьте добавить 1, чтобы получить номер месяца от 1 до 12), день месяца.
Установите дату на 1 число следующего месяца.
Теперь мы умеем организовывать данные в виде списков (массивы) и структурированных коллекций (объекты), а также работать с математическими функциями и датами. Это фундамент для решения многих задач.
Следующая глава будет посвящена тому, как эти знания связать с внешним миром – как JavaScript взаимодействует с HTML-документом на странице.
Глава 7: Взаимодействие с Веб-Страницей: DOM.
В предыдущих главах мы освоили основы языка JavaScript: переменные, типы данных, операторы, условия, циклы и функции. Мы также научились работать с коллекциями данных – массивами и объектами. Теперь пришло время соединить JavaScript с тем, что видит пользователь – с веб-страницей.
Термин: DOM (Document Object Model) — это объектно-ориентированное представление HTML-документа. DOM (Document Object Model) представляет собой независимый от платформы и языка интерфейс программирования, который предоставляет возможность программам и скриптам взаимодействовать с HTML-, XHTML- и XML-документами. С его помощью можно получать доступ к содержимому документов, а также изменять их структуру, контент и визуальное представление.
Представьте DOM как дерево, где каждый узел дерева представляет собой часть HTML-документа: тег, атрибут, текст внутри тега. JavaScript может получить доступ к этому “дереву” и манипулировать им – изменять содержимое, стили, структуру, реагировать на действия пользователя.
Когда браузер загружает HTML-страницу, он создает DOM-представление этой страницы. JavaScript, запущенный в браузере, может взаимодействовать с этим DOM.
7.1. Что такое DOM (Структура дерева)DOM не устанавливает жестких рамок для структуры документа. Любой документ, имеющий определенную структуру, может быть представлен в виде древовидной структуры узлов. Каждый узел в этой структуре соответствует элементу, текстовому фрагменту, графическому объекту или другому компоненту документа. Узлы связаны между собой иерархическими отношениями, подобными «родитель-потомок».
DOM представляет HTML-документ в виде иерархической структуры:
Документ (Document): Корневой узел всего DOM. В JavaScript это глобальный объект document.
Элементы (Elements): Каждый HTML-тег (например, ,
,,
,
) является узлом-элементом в DOM. Пример DOM (Текстовый узел: "Пример DOM")</p> <p> └── <body></p> <p> ├── <h1> (Текстовый узел: "Заголовок")</p> <p> ├── <p id="intro"> (Текстовый узел: "Это первый параграф.")</p> <p> └── <div class="content"></p> <p> └── <p> (Текстовый узел: "Это второй параграф.")</p> 7.2. Как найти элементы на странице <p>Чтобы манипулировать элементами, нам сначала нужно получить к ним доступ. JavaScript предоставляет несколько методов для поиска элементов в DOM.</p> <p>А) Поиск по ID (getElementById)</p> <p>Термин: ID (Identifier) — уникальный идентификатор элемента на странице. Каждый id должен быть уникален в пределах одного HTML-документа.</p> <p>Метод document.getElementById(id) возвращает первый элемент, у которого указанный id.</p> <p>javascript</p> <p>// Предполагая, что на странице есть <p id="intro">...</p></p> <p>let introParagraph = document.getElementById("intro");</p> <p>console.log(introParagraph); // Выведет объект <p id="intro">...</p></p> <p>// Теперь мы можем работать с этим элементом:</p> <p>introParagraph.textContent = "Новый текст для параграфа."; // Изменяем текст</p> <p>Б) Поиск по именам тегов (getElementsByTagName)</p> <p>Метод document.getElementsByTagName(tagName) возвращает HTML-коллекцию (похожа на массив, но не совсем) всех элементов с указанным именем тега.</p> <p>html</p> <p><ul></p> <p> <li>Элемент 1</li></p> <p> <li>Элемент 2</li></p> <p></ul></p> <p><p>Какой-то текст.</p></p> <p><ul></p> <p> <li>Элемент 3</li></p> <p></ul></p> <p>javascript</p> <p>let allParagraphs = document.getElementsByTagName("p");</p> <p>console.log(allParagraphs); // HTMLCollection [ <p>Какой-то текст.</p> ] (в данном случае)</p> <p>let allLists = document.getElementsByTagName("ul");</p> <p>console.log(allLists); // HTMLCollection [ <ul>...</ul>, <ul>...</ul> ]</p> <p>// Доступ к элементам в коллекции по индексу</p> <p>console.log(allLists[0]); // Первый <ul></p> <p>console.log(allLists[1]); // Второй <ul></p> <p>// Перебор коллекции (можно использовать for...of или обычный for)</p> <p>for (let list of allLists) {</p> <p> console.log(list);</p> <p>}</p> <p>Важно: getElementsByTagName возвращает живую коллекцию. Это значит, что если DOM изменится (например, добавятся новые элементы <li>), коллекция автоматически обновится.</p> <p>В) Поиск по именам классов (getElementsByClassName)</p> <p>Метод document.getElementsByClassName(className) возвращает HTML-коллекцию всех элементов, у которых есть указанный CSS-класс. Можно передавать несколько классов, разделенных пробелом, но это будет искать элементы, у которых есть ВСЕ перечисленные классы.</p> <p>html</p> <p><div class="item important">Важный элемент 1</div></p> <p><div class="item">Обычный элемент</div></p> <p><div class="item important">Важный элемент 2</div></p> <p>javascript</p> <p>let importantItems = document.getElementsByClassName("important");</p> <p>console.log(importantItems); // HTMLCollection [ <div class="item important">..., <div class="item important">...</div> ]</p> <p>let allItems = document.getElementsByClassName("item");</p> <p>console.log(allItems); // HTMLCollection [ <div class="item important">..., <div class="item">..., <div class="item important">...</div> ]</p> <p>// Поиск элементов с двумя классами (очень редко нужно)</p> <p>let itemAndImportant = document.getElementsByClassName("item important");</p> <p>console.log(itemAndImportant); // HTMLCollection [ <div class="item important">...</div> ]</p> <p>getElementsByClassName также возвращает живую коллекцию.</p> <p>Г) Современные и универсальные методы (querySelector, querySelectorAll)</p> <p>Эти методы используют синтаксис CSS-селекторов, что делает их очень мощными и гибкими.</p> <p>document.querySelector(selector): Возвращает первый элемент, который соответствует указанному CSS-селектору.javascript// Поиск по ID</p> <p>let introPara = document.querySelector("#intro"); // То же, что getElementById("intro")</p> <p>// Поиск по имени тега</p> <p>let firstH1 = document.querySelector("h1");</p> <p>// Поиск по классу</p> <p>let firstImportantItem = document.querySelector(".important"); // Найдет первый элемент с классом "important"</p> <p>// Поиск по имени тега внутри другого тега</p> <p>let firstParagraphInDiv = document.querySelector("div p"); // Найдет первый <p> внутри <div></p> <p>// Поиск по комбинации селекторов</p> <p>let specificDiv = document.querySelector("div.content p"); // Найдет <p> внутри <div class="content"></p> <p>document.querySelectorAll(selector): Возвращает NodeList (статическую коллекцию, похожую на массив, но не живую) всех элементов, которые соответствуют указанному CSS-селектору.javascript// Получить все параграфы</p> <p>let allParagraphs = document.querySelectorAll("p");</p> <p>console.log(allParagraphs); // NodeList [ <p id="intro">...</p>, <p>...</p> ]</p> <p>// Получить все элементы с классом "item"</p> <p>let allItems = document.querySelectorAll(".item");</p> <p>console.log(allItems);</p> <p>// Получить все элементы h1, h2, h3</p> <p>let headings = document.querySelectorAll("h1, h2, h3");</p> <p>// Получить все элементы li внутри ul</p> <p>let listItems = document.querySelectorAll("ul li");</p> <p>// Перебор NodeList (можно использовать forEach, for...of)</p> <p>listItems.forEach((item, index) => {</p> <p> console.log(`List item ${index + 1}: ${item.textContent}`);</p> <p>});</p> <p>Когда использовать какой метод:</p> <p>getElementById: Если у вас есть id и вам нужен один конкретный элемент. Очень быстро.</p> <p>querySelector: Универсальный метод для поиска первого элемента по любому CSS-селектору. Гибкий и удобный.</p> <p>querySelectorAll: Для поиска всех элементов, соответствующих CSS-селектору. Возвращает NodeList, который удобно перебирать.</p> <p>getElementsByTagName, getElementsByClassName: Могут быть немного быстрее querySelectorAll в специфических случаях, но querySelectorAll часто предпочтительнее из-за его универсальности и поддержки CSS-селекторов.</p> 7.3. Изменение содержимого и атрибутов элементов <p>Получив доступ к элементу, мы можем изменять его содержимое, атрибуты и стили.</p> <p>А) Изменение текстового содержимого:</p> <p>element.textContent: Устанавливает или возвращает текст внутри элемента. HTML-теги внутри текста будут отображаться как обычный текст.</p> <p>element.innerHTML: Устанавливает или возвращает HTML-код внутри элемента. Это значит, что если вы присвоите сюда строку с HTML-тегами, они будут интерпретированы браузером. Используйте с осторожностью, чтобы избежать XSS-уязвимостей (если содержимое приходит от пользователя).</p> <p>html</p> <p><p id="myParagraph">Старый текст.</p></p> <p><div id="myDiv"></div></p> <p>javascript</p> <p>let paragraph = document.getElementById("myParagraph");</p> <p>// Изменение текста</p> <p>paragraph.textContent = "Новый текст."; // Отобразится как обычный текст</p> <p>console.log(paragraph.textContent); // "Новый текст."</p> <p>// Изменение HTML-содержимого</p> <p>let div = document.getElementById("myDiv");</p> <p>div.innerHTML = "<strong>Жирный текст</strong> и <em>курсив</em>."; // HTML-теги будут обработаны</p> <p>console.log(div.innerHTML); // "<strong>Жирный текст</strong> и <em>курсив</em>."</p> <p>// Если использовать textContent вместо innerHTML с HTML-тегами</p> <p>div.textContent = "<strong>Жирный текст</strong>"; // Отобразится как "<strong>Жирный текст</strong>" (буквально)</p> <p>Б) Изменение атрибутов:</p> <p>Прямой доступ (для стандартных атрибутов): Если атрибут является стандартным свойством элемента (например, id, src, href, class, value), вы можете получить или установить его напрямую.html<img id="myImage" src="image.jpg" alt="Описание"></p> <p><a href="https://example.com" id="myLink">Ссылка</a></p> <p>javascriptlet img = document.getElementById("myImage");</p> <p>img.src = "new_image.png"; // Изменяем источник изображения</p> <p>img.alt = "Новое описание"; // Изменяем атрибут alt</p> <p>let link = document.getElementById("myLink");</p> <p>link.href = "https://new-example.com"; // Изменяем ссылку</p> <p>link.textContent = "Перейти на новый сайт"; // Изменяем текст ссылки</p> <p>Методы getAttribute(), setAttribute(), removeAttribute(): Более универсальные методы, которые работают с любыми атрибутами, включая пользовательские (data-*).html<button data-action="save">Сохранить</button></p> <p>javascriptlet button = document.querySelector('button');</p> <p>// Получить атрибут</p> <p>console.log(button.getAttribute('data-action')); // "save"</p> <p>console.log(button.getAttribute('disabled')); // null (если атрибута нет)</p> <p>// Установить атрибут</p> <p>button.setAttribute('disabled', ''); // Делаем кнопку неактивной (значение атрибута может быть пустым)</p> <p>button.setAttribute('data-action', 'delete'); // Изменяем атрибут</p> <p>// Удалить атрибут</p> <p>button.removeAttribute('disabled');</p> <p>В) Изменение стилей:</p> <p>Стили элемента можно изменять через его свойство style. Каждый CSS-свойство, написанное через дефис (например, background-color), преобразуется в camelCase (например, backgroundColor) для использования в JavaScript.</p> <p>html</p> <p><div id="myBox" style="width: 100px; height: 100px; background-color: lightblue;"></div></p> <p>javascript</p> <p>let box = document.getElementById("myBox");</p> <p>// Изменение стиля</p> <p>box.style.width = "200px"; // Устанавливаем ширину</p> <p>box.style.height = "150px"; // Устанавливаем высоту</p> <p>box.style.backgroundColor = "lightgreen"; // Устанавливаем фоновый цвет</p> <p>box.style.border = "2px solid red"; // Добавляем рамку</p> <p>// Получение текущего стиля (может быть сложнее, чем кажется, если стили заданы в CSS-файлах, а не инлайново)</p> <p>console.log(box.style.width); // "200px" (если был инлайново задан или последний измененный)</p> <p>Работа с классами CSS:</p> <p>Часто гораздо удобнее управлять стилями, добавляя или удаляя CSS-классы, чем менять отдельные свойства style. Это позволяет отделять логику JavaScript от стилизации.</p> <p>element.classList: Это свойство возвращает объект DOMTokenList, который имеет удобные методы для управления классами:add(className): Добавляет класс.</p> <p>remove(className): Удаляет класс.</p> <p>toggle(className): Добавляет класс, если его нет, и удаляет, если он есть.</p> <p>contains(className): Проверяет, есть ли у элемента указанный класс (возвращает true или false).</p> <p>html</p> <p><div id="myDivWithClass" class="box normal"></div></p> <p>javascript</p> <p>let divWithClass = document.getElementById("myDivWithClass");</p> <p>// Добавить класс</p> <p>divWithClass.classList.add("highlight"); // Класс "highlight" будет добавлен</p> <p>console.log(divWithClass.className); // "box normal highlight"</p> <p>// Удалить класс</p> <p>divWithClass.classList.remove("normal"); // Класс "normal" будет удален</p> <p>console.log(divWithClass.className); // "box highlight"</p> <p>// Переключить класс</p> <p>divWithClass.classList.toggle("active"); // Класс "active" будет добавлен</p> <p>divWithClass.classList.toggle("active"); // Класс "active" будет удален</p> <p>console.log(divWithClass.classList.contains("highlight")); // true</p> <p>console.log(divWithClass.classList.contains("normal")); // false</p> <p>CSS, который будет работать с этими классами:</p> <p>css</p> <p>.box {</p> <p> width: 100px;</p> <p> height: 50px;</p> <p> border: 1px solid black;</p> <p>}</p> <p>.highlight {</p> <p> background-color: yellow;</p> <p> font-weight: bold;</p> <p>}</p> <p>.active {</p> <p> border-color: blue;</p> <p> transform: scale(1.1); /* Небольшое увеличение */</p> <p>}</p> 7.4. Создание и удаление элементов <p>JavaScript может не только изменять существующие элементы, но и создавать новые, а также удалять их из DOM.</p> <p>Создание элемента:</p> <p>document.createElement(tagName): Создает новый элемент с указанным именем тега. Этот элемент пока не находится на странице, он существует только в памяти.javascriptlet newParagraph = document.createElement("p"); // Создали элемент <p></p> <p>newParagraph.textContent = "Это новый параграф, созданный JavaScript.";</p> <p>newParagraph.classList.add("info-text"); // Добавили класс</p> <p>Добавление элемента на страницу:</p> <p>Чтобы созданный элемент появился на странице, его нужно добавить к какому-либо существующему элементу.</p> <p>parentElement.appendChild(childElement): Добавляет childElement как последнего потомка parentElement.javascript// Предположим, у нас есть <div id="container"></div></p> <p>let container = document.getElementById("container");</p> <p>let newParagraph = document.createElement("p");</p> <p>newParagraph.textContent = "Добавлен в конец контейнера.";</p> <p>container.appendChild(newParagraph); // Параграф появится внутри div#container</p> <p>parentElement.insertBefore(newElement, referenceElement): Вставляет newElement перед referenceElement внутри parentElement.javascript// Предположим, у нас есть <div id="container"> <p id="existingPara">Существующий</p> </div></p> <p>let container = document.getElementById("container");</p> <p>let existingPara = document.getElementById("existingPara");</p> <p>let newPara = document.createElement("p");</p> <p>newPara.textContent = "Добавлен перед существующим.";</p> <p>container.insertBefore(newPara, existingPara); // Новый параграф появится перед existingPara</p> <p>Удаление элемента:</p> <p>element.remove(): Удаляет элемент из DOM.javascriptlet elementToRemove = document.getElementById("itemToDelete");</p> <p>if (elementToRemove) { // Важно проверять, существует ли элемент, прежде чем удалять</p> <p> elementToRemove.remove();</p> <p>}</p> <p>parentElement.removeChild(childElement): Более старый метод, который удаляет childElement из parentElement.javascriptlet parent = document.getElementById("parent");</p> <p>let child = document.getElementById("child");</p> <p>if (parent && child) {</p> <p> parent.removeChild(child);</p> <p>}</p> 7.5. Работа с классами CSS (краткое повторение) <p>Мы уже видели classList для добавления, удаления и переключения классов. Это наиболее рекомендуемый способ управления стилями элемента с помощью JavaScript.</p> <p>Пример 7.5.1: Динамическое изменение стиля кнопки</p> <p>html</p> <p><button id="myButton" class="btn">Нажми меня</button></p> <p>css</p> <p>.btn {</p> <p> padding: 10px 20px;</p> <p> border: 1px solid gray;</p> <p> background-color: lightgray;</p> <p> cursor: pointer;</p> <p>}</p> <p>.btn.active { /* Стиль для активной кнопки */</p> <p> background-color: dodgerblue;</p> <p> color: white;</p> <p> font-weight: bold;</p> <p>}</p> <p>javascript</p> <p>let button = document.getElementById("myButton");</p> <p>button.addEventListener("click", function() { // Добавим обработчик события клика (об этом позже)</p> <p> button.classList.toggle("active"); // Переключит класс 'active' при каждом клике</p> <p>});</p> <p>При каждом нажатии на кнопку будет добавляться или удаляться класс active, что будет менять ее внешний вид согласно CSS-правилам.</p> <p>Практическое задание:</p> <p>Создайте простую HTML-страницу с <h1>, <p> и <ul>.Используйте document.getElementById() для доступа к <h1> и измените его текст.</p></div></div></div></div><div class="Pagination_bookPagination__vchpD"><div class="Pagination_pagination__thWr5"><a class="Previous_prev__nRln6" href="/author/aleksandr-olshevski/kniga-javascript-ot-osnov-do-full-stack-razrabotki-72648025-1242138/read/pagenum-4/"><</a><span><a class="Pagination_pagination__link__innVr" href="/author/aleksandr-olshevski/kniga-javascript-ot-osnov-do-full-stack-razrabotki-72648025-1242138/read/">1</a></span><span>...</span><span><a class="Pagination_pagination__link__innVr" href="/author/aleksandr-olshevski/kniga-javascript-ot-osnov-do-full-stack-razrabotki-72648025-1242138/read/pagenum-3/">3</a></span><span><a class="Pagination_pagination__link__innVr" href="/author/aleksandr-olshevski/kniga-javascript-ot-osnov-do-full-stack-razrabotki-72648025-1242138/read/pagenum-4/">4</a></span><span><span class="Pagination_active__FIUxq">5</span></span><span><a class="Pagination_pagination__link__innVr" href="/author/aleksandr-olshevski/kniga-javascript-ot-osnov-do-full-stack-razrabotki-72648025-1242138/read/pagenum-6/">6</a></span><a class="Next_next__5tJXc" href="/author/aleksandr-olshevski/kniga-javascript-ot-osnov-do-full-stack-razrabotki-72648025-1242138/read/pagenum-6/">></a></div></div></div></div><div class="ScrollBtn_scrollBtn__vfSKf"></div></div></main><footer class="Footer_footer__kObrD"><div class="Footer_footer__menuWarp__p_8a7"><div class="Footer_footer__logo__kM29g">Электронная библиотека АЛЬДЕБАРАН</div><ul class="Footer_footer__menu__gXS3F"><li class="Footer_footer__menuItem__fZeCy Footer_footer__menuItem_desktop__lA_00"><a class="Footer_footer__menuItemLink__ZDQYJ" href="/knigi/novinki/">Новинки</a><a class="Footer_footer__menuItemLink__ZDQYJ" href="/knigi/">Популярные авторы</a><a class="Footer_footer__menuItemLink__ZDQYJ" href="/contact/">Контакты</a></li><li class="Footer_footer__menuItem__fZeCy"><a target="_blank" class="Footer_footer__menuItemLink__ZDQYJ" href="https://www.litres.ru/?lfrom=1258056569">Litres.ru</a><a target="_blank" class="Footer_footer__menuItemLink__ZDQYJ" href="https://selfpub.ru/?utm_source=aldebaran&utm_campaign=partners-ru&utm_medium=partners&utm_content=footermain">SelfPub.ru</a><a target="_blank" class="Footer_footer__menuItemLink__ZDQYJ" href="https://mybook.ru/">MyBook.ru</a></li></ul></div><div><a class="Footer_footer__mail__tcRmh" href="mailto:copyright@aldebaran.one">copyright@aldebaran.one</a></div></footer><div class="AuthPopup_authPopup__G7BhY"><div class="AuthPopup_authPopup__bg__DaRDh"></div><div class="AuthPopup_authPopup__wrap__VUxKW"><div class="AuthPopup_authPopup__btn__0sHQA"></div><div class="AuthPopup_authPopup__tabs__qEbcK"><span class="AuthPopup_authPopup__tab__XHjLW AuthPopup_authPopup__tab_active__esGEF">Вход В личный кабинет</span><span class="AuthPopup_authPopup__tab__XHjLW">Регистрация</span></div><form class="AuthPopup_authPopup__form__jFvrx"><div class="FormField_inputWrap__xVETy FormField_inputWrap_email__VVdOj"><label class="FormField_inputLabel___uG5H" for="email">Email<!-- -->:<span class="FormField_inputLabel__star__8XFEd">*</span></label><input type="text" name="email" placeholder="Электронная почта" id="email" class="FormField_input__2cP_T"/></div><div class="FormField_inputWrap__xVETy FormField_inputWrap_password__OQ_Ez"><label class="FormField_inputLabel___uG5H" for="password">Пароль<!-- -->:<span class="FormField_inputLabel__star__8XFEd">*</span></label><input type="password" name="password" placeholder="Пароль" id="password" class="FormField_input__2cP_T"/></div><div><div class="AuthPopup_authPopup__controlsBtns__CDUxO"><div><input type="submit" id="authorization" class="FormBtn_inputBtn__uzWPO" value="Войти"/></div><a class="AuthPopup_authPopup__controlsBtn__CkbPP" href="/password_recover/">Забыли пароль</a></div></div></form></div></div></div><div id="adCounters"><noscript><iframe loading="lazy" src="https://www.googletagmanager.com/ns.html?id=GTM-T36DXRH" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript></div></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"book":{"id":1242138,"book_id":1358142,"alias":"kniga-javascript-ot-osnov-do-full-stack-razrabotki-72648025-1242138","rating":0,"voted_users":0,"type":"book","genres":[{"id":5270,"title":"программы","alias":"programmy"},{"id":5272,"title":"программирование","alias":"programmirovanie"},{"id":6487,"title":"книги о компьютерах","alias":"knigi_o_kompyuterah"}],"author":{"id":null,"alias":"aleksandr-olshevski","first_name":"Александр","middle_name":"","last_name":"Ольшевски"},"tags":[{"id":14,"title":"Самиздат","alias":"samizdat"},{"id":1099,"title":"разработка программного обеспечения","alias":"razrabotka-programmnogo-obespecheniia"},{"id":1454,"title":"обучение программированию","alias":"obuchenie-programmirovaniiu"},{"id":1539,"title":"языки программирования","alias":"iazyki-programmirovaniia"},{"id":2569,"title":"компьютерные технологии","alias":"kompiuternye-tekhnologii"},{"id":17026,"title":"язык JavaScript","alias":"iazyk-javascript"}],"series":[],"book":{"id":1358142,"author_id":361381,"external_id":72648025,"external_uid":"23079684-a971-41a5-b099-e23650399bb7","title":"JavaScript: От Основ до Full-Stack Разработки","alias":"javascript-ot-osnov-do-full-stack-razrabotki-72648025","description":"Практическое руководство для современной веб-разработки на JavaScript. Книга предназначена для начинающих , а также желающих углубить свои знания до уровня профессионального Full-Stack разработчика.\nВы начнете с самых азов: погрузитесь в синтаксис, освоите типы данных, функции, объекты и современные возможности ES6+. Перейдете к созданию динамичных пользовательских интерфейсов с помощью мощного React-фреймворка, научитесь управлять состоянием, использовать хуки и строить сложные UI-компоненты.\nВас ждет погружение в мир Backend-разработки с Node.js. Вы освоите создание RESTful API на Express, работу с базами данных (SQL и NoSQL), научитесь строить масштабируемые серверные приложения. Особое внимание уделено тестированию кода (Unit-тесты с Jest), повышению надежности с помощью TypeScript – языка.\nКнига также охватывает темы, такие как архитектурные паттерны (SOLID, MVC), чистый код, DevOps и автоматизация (CI/CD, Docker), основы облачных технологий (AWS, Azure, GCP) и многое другое.","type":"book","lang":"ru","src_lang":"ru","publisher":"SelfPub","allow_full_free":0,"isbn":null,"webtoon":false},"files":[{"type":"fb3","external_file_id":72648025},{"type":"a4.pdf","external_file_id":72648025},{"type":"a6.pdf","external_file_id":72648025},{"type":"mobi.prc","external_file_id":72648025},{"type":"epub","external_file_id":72648025},{"type":"ios.epub","external_file_id":72648025},{"type":"fb2.zip","external_file_id":72648025},{"type":"txt","external_file_id":72648025},{"type":"txt.zip","external_file_id":72648025},{"type":"rtf.zip","external_file_id":72648025}],"draft":false,"reader":null,"translator":null,"views_count":151,"litres_rating":0,"livelib_rating":0,"related_posts":null,"other_author_books":[{"id":1222659,"alias":"kniga-chatgpt-ot-geniia-do-bezumtsa-1222659","author":{"alias":"aleksandr-olshevski"},"book":{"id":1222659,"external_id":72497644,"title":"ChatGPT: От Гения до Безумца","type":"audio_book","allow_full_free":0}},{"id":1265115,"alias":"kniga-kitayskiy-dlya-professionalov-72781828-1265115","author":{"alias":"aleksandr-olshevski"},"book":{"id":1265115,"external_id":72781828,"title":"Китайский для профессионалов","type":"book","allow_full_free":0}},{"id":1211689,"alias":"kniga-unlock-chinese-discover-mandarin-72442141-1211689","author":{"alias":"aleksandr-olshevski"},"book":{"id":1211689,"external_id":72442141,"title":"Unlock Chinese. Discover Mandarin","type":"pdf","allow_full_free":0}},{"id":1222627,"alias":"kniga-chatgpt-ot-geniya-do-bezumca-72497629-1222627","author":{"alias":"aleksandr-olshevski"},"book":{"id":1222627,"external_id":72497629,"title":"ChatGPT: От Гения до Безумца","type":"book","allow_full_free":0}},{"id":1211690,"alias":"kniga-rukovodstvo-po-deepseek-glubokoe-pogruzhenie-v-mir-ney-72442138-1211690","author":{"alias":"aleksandr-olshevski"},"book":{"id":1211690,"external_id":72442138,"title":"Руководство по DeepSeek: Глубокое Погружение в Мир Нейросетей","type":"pdf","allow_full_free":0}}],"relative_book":null,"external_reviews":[],"retelling_text":null,"hide_litres_data":false},"read":{"page":5,"pages":6,"type":"fb2","content":" \u003cp\u003eС указанием даты и времени: Аргументы можно передавать в разном формате, но самый надежный — это комбинация числовых значений.javascript// new Date(год, месяц, день, час, минута, секунда, миллисекунда)\u003c/p\u003e \u003cp\u003e// Месяцы нумеруются с 0 (январь) до 11 (декабрь)!\u003c/p\u003e \u003cp\u003elet specificDate = new Date(2023, 10, 21, 14, 30, 0, 0); // 21 Ноября 2023, 14:30:00\u003c/p\u003e \u003cp\u003econsole.log(specificDate); // Выведет: Tue Nov 21 2023 14:30:00 GMT+0000 (Coordinated Universal Time) - формат может отличаться\u003c/p\u003e \u003cp\u003eВажно: Месяцы в Date нумеруются с 0 (январь) по 11 (декабрь). Это частый источник ошибок.\u003c/p\u003e \u003cp\u003eС указанием строки: Можно передать строку, но формат строки может интерпретироваться по-разному разными браузерами, поэтому этот способ менее надежен.javascriptlet dateFromString = new Date(\"2023-11-21T14:30:00\"); // ISO 8601 формат, более надежный\u003c/p\u003e \u003cp\u003econsole.log(dateFromString);\u003c/p\u003e \u003cp\u003eПолучение компонентов даты и времени:\u003c/p\u003e \u003cp\u003eОбъект Date имеет множество методов для получения отдельных частей даты/времени:\u003c/p\u003e \u003cp\u003egetFullYear(): Возвращает год (4 цифры).\u003c/p\u003e \u003cp\u003egetMonth(): Возвращает месяц (0-11). Помните про 0-индексацию!\u003c/p\u003e \u003cp\u003egetDate(): Возвращает день месяца (1-31).\u003c/p\u003e \u003cp\u003egetDay(): Возвращает день недели (0 - воскресенье, 1 - понедельник, …, 6 - суббота).\u003c/p\u003e \u003cp\u003egetHours(): Возвращает час (0-23).\u003c/p\u003e \u003cp\u003egetMinutes(): Возвращает минуты (0-59).\u003c/p\u003e \u003cp\u003egetSeconds(): Возвращает секунды (0-59).\u003c/p\u003e \u003cp\u003egetTime(): Возвращает количество миллисекунд, прошедших с 1 января 1970 года (Unix Timestamp). Полезно для сравнения дат или измерения интервалов.\u003c/p\u003e \u003cp\u003ejavascript\u003c/p\u003e \u003cp\u003elet myDate = new Date(2024, 0, 15, 10, 0, 0); // 15 Января 2024, 10:00:00\u003c/p\u003e \u003cp\u003econsole.log(\"Год:\", myDate.getFullYear()); // 2024\u003c/p\u003e \u003cp\u003econsole.log(\"Месяц:\", myDate.getMonth()); // 0 (Январь)\u003c/p\u003e \u003cp\u003econsole.log(\"День месяца:\", myDate.getDate()); // 15\u003c/p\u003e \u003cp\u003econsole.log(\"День недели:\", myDate.getDay()); // 1 (Понедельник)\u003c/p\u003e \u003cp\u003econsole.log(\"Час:\", myDate.getHours()); // 10\u003c/p\u003e \u003cp\u003econsole.log(\"Минуты:\", myDate.getMinutes()); // 0\u003c/p\u003e \u003cp\u003econsole.log(\"Секунды:\", myDate.getSeconds()); // 0\u003c/p\u003e \u003cp\u003econsole.log(\"Timestamp:\", myDate.getTime()); // Большое число миллисекунд\u003c/p\u003e \u003cp\u003eУстановка компонентов даты и времени:\u003c/p\u003e \u003cp\u003eТакже есть методы для установки значений:\u003c/p\u003e \u003cp\u003esetFullYear(year)\u003c/p\u003e \u003cp\u003esetMonth(month)\u003c/p\u003e \u003cp\u003esetDate(date)\u003c/p\u003e \u003cp\u003esetHours(hours, minutes, seconds, ms) (можно установить все сразу)\u003c/p\u003e \u003cp\u003esetTime(milliseconds)\u003c/p\u003e \u003cp\u003ejavascript\u003c/p\u003e \u003cp\u003elet today = new Date();\u003c/p\u003e \u003cp\u003etoday.setFullYear(2025);\u003c/p\u003e \u003cp\u003etoday.setMonth(0); // Устанавливаем январь\u003c/p\u003e \u003cp\u003etoday.setDate(1);\u003c/p\u003e \u003cp\u003econsole.log(today); // Дата станет 1 Января 2025 года\u003c/p\u003e \u003cp\u003eСравнение дат:\u003c/p\u003e \u003cp\u003eДаты можно сравнивать, используя обычные операторы сравнения (\u003c, \u003e, \u003c=, \u003e=). Сравнение происходит по их значению в миллисекундах (getTime()).\u003c/p\u003e \u003cp\u003ejavascript\u003c/p\u003e \u003cp\u003elet date1 = new Date(2024, 0, 15);\u003c/p\u003e \u003cp\u003elet date2 = new Date(2024, 0, 16);\u003c/p\u003e \u003cp\u003eif (date1 \u003c date2) {\u003c/p\u003e \u003cp\u003e console.log(\"date1 раньше date2\"); // Выполнится\u003c/p\u003e \u003cp\u003e}\u003c/p\u003e \u003cp\u003eПрактическое задание:\u003c/p\u003e \u003cp\u003eСоздайте массив studentScores с несколькими числами (оценками).Добавьте новую оценку в конец массива с помощью push().\u003c/p\u003e \u003cp\u003eУдалите последнюю оценку с помощью pop() и сохраните ее в переменной droppedScore.\u003c/p\u003e \u003cp\u003eДобавьте оценку 100 в начало массива с помощью unshift().\u003c/p\u003e \u003cp\u003eУдалите первую оценку с помощью shift() и сохраните ее.\u003c/p\u003e \u003cp\u003eИспользуйте splice(), чтобы заменить оценку с индексом 2 на 95.\u003c/p\u003e \u003cp\u003eИспользуйте slice(), чтобы создать новый массив topScores из двух лучших оценок (предполагая, что они в конце массива).\u003c/p\u003e \u003cp\u003eИспользуйте includes(), чтобы проверить, есть ли в studentScores оценка 70.\u003c/p\u003e \u003cp\u003eИспользуйте indexOf() для поиска первой оценки 80.\u003c/p\u003e \u003cp\u003eИспользуйте join() для преобразования массива studentScores в строку с разделителем “-“.\u003c/p\u003e \u003cp\u003eПереберите массив studentScores с помощью forEach() и выведите каждую оценку.\u003c/p\u003e \u003cp\u003eСоздайте объект bookInfo со свойствами title, author, publicationYear, genre.Выведите название книги, используя точечную нотацию.\u003c/p\u003e \u003cp\u003eВыведите автора, используя скобочную нотацию и переменную propertyName = \"author\".\u003c/p\u003e \u003cp\u003eИзмените publicationYear на более поздний.\u003c/p\u003e \u003cp\u003eДобавьте новое свойство isBestseller со значением true.\u003c/p\u003e \u003cp\u003eУдалите свойство genre.\u003c/p\u003e \u003cp\u003eИспользуйте for...in для перебора оставшихся свойств объекта и вывода их в консоль.\u003c/p\u003e \u003cp\u003eИспользуйте Object.values() для получения массива значений объекта и выведите его.\u003c/p\u003e \u003cp\u003eИспользуйте Object.entries() для получения пар ключ-значение и переберите их с помощью forEach() и деструктуризации.\u003c/p\u003e \u003cp\u003eИспользуя Math.random(), Math.floor() и Math.max(), Math.min(), напишите функцию getRandomInt(min, max), которая возвращает случайное целое число в заданном диапазоне (включая min и max).\u003c/p\u003e \u003cp\u003eСоздайте объект userProfile со свойствами firstName, lastName. Напишите метод getFullName(), который возвращает полное имя, используя this.\u003c/p\u003e \u003cp\u003eСоздайте объект currentDate типа Date.Выведите текущий год, месяц (не забудьте добавить 1, чтобы получить номер месяца от 1 до 12), день месяца.\u003c/p\u003e \u003cp\u003eУстановите дату на 1 число следующего месяца.\u003c/p\u003e \u003cp\u003eТеперь мы умеем организовывать данные в виде списков (массивы) и структурированных коллекций (объекты), а также работать с математическими функциями и датами. Это фундамент для решения многих задач.\u003c/p\u003e \u003cp\u003eСледующая глава будет посвящена тому, как эти знания связать с внешним миром – как JavaScript взаимодействует с HTML-документом на странице.\u003c/p\u003e \u003c/section\u003e \u003csection\u003e \u003ch3\u003e \u003cp\u003eГлава 7: Взаимодействие с Веб-Страницей: DOM.\u003c/p\u003e \u003c/h3\u003e \u003cp\u003eВ предыдущих главах мы освоили основы языка JavaScript: переменные, типы данных, операторы, условия, циклы и функции. Мы также научились работать с коллекциями данных – массивами и объектами. Теперь пришло время соединить JavaScript с тем, что видит пользователь – с веб-страницей.\u003c/p\u003e \u003cp\u003eТермин: DOM (Document Object Model) — это объектно-ориентированное представление HTML-документа. DOM (Document Object Model) представляет собой независимый от платформы и языка интерфейс программирования, который предоставляет возможность программам и скриптам взаимодействовать с HTML-, XHTML- и XML-документами. С его помощью можно получать доступ к содержимому документов, а также изменять их структуру, контент и визуальное представление.\u003c/p\u003e \u003cp\u003eПредставьте DOM как дерево, где каждый узел дерева представляет собой часть HTML-документа: тег, атрибут, текст внутри тега. JavaScript может получить доступ к этому “дереву” и манипулировать им – изменять содержимое, стили, структуру, реагировать на действия пользователя.\u003c/p\u003e \u003cp\u003eКогда браузер загружает HTML-страницу, он создает DOM-представление этой страницы. JavaScript, запущенный в браузере, может взаимодействовать с этим DOM.\u003c/p\u003e 7.1. Что такое DOM (Структура дерева) \u003cp\u003eDOM не устанавливает жестких рамок для структуры документа. Любой документ, имеющий определенную структуру, может быть представлен в виде древовидной структуры узлов. Каждый узел в этой структуре соответствует элементу, текстовому фрагменту, графическому объекту или другому компоненту документа. Узлы связаны между собой иерархическими отношениями, подобными «родитель-потомок».\u003c/p\u003e \u003cp\u003eDOM представляет HTML-документ в виде иерархической структуры:\u003c/p\u003e \u003cp\u003eДокумент (Document): Корневой узел всего DOM. В JavaScript это глобальный объект document.\u003c/p\u003e \u003cp\u003eЭлементы (Elements): Каждый HTML-тег (например, \u003chtml\u003e, \u003cbody\u003e, \u003ch1\u003e, \u003cp\u003e, \u003cdiv\u003e) является узлом-элементом в DOM.\u003c/p\u003e \u003cp\u003eАтрибуты (Attributes): Атрибуты HTML-тегов (например, src в теге \u003cimg\u003e, href в теге \u003ca\u003e, class или id) также являются узлами, но они обычно связаны с узлами-элементами.\u003c/p\u003e \u003cp\u003eТекстовые узлы (Text Nodes): Текст внутри HTML-элементов (например, “Привет, мир!” внутри тега \u003cp\u003e) также является узлом.\u003c/p\u003e \u003cp\u003eПример HTML-структуры и ее DOM-представления:\u003c/p\u003e \u003cp\u003ehtml\u003c/p\u003e \u003cp\u003e\u003c!DOCTYPE html\u003e\u003c/p\u003e \u003cp\u003e\u003chtml lang=\"ru\"\u003e\u003c/p\u003e \u003cp\u003e\u003chead\u003e\u003c/p\u003e \u003cp\u003e \u003cmeta charset=\"UTF-8\"\u003e\u003c/p\u003e \u003cp\u003e \u003ctitle\u003eПример DOM\u003c/title\u003e\u003c/p\u003e \u003cp\u003e\u003c/head\u003e\u003c/p\u003e \u003cp\u003e\u003cbody\u003e\u003c/p\u003e \u003cp\u003e \u003ch1\u003eЗаголовок\u003c/h1\u003e\u003c/p\u003e \u003cp\u003e \u003cp id=\"intro\"\u003eЭто первый параграф.\u003c/p\u003e\u003c/p\u003e \u003cp\u003e \u003cdiv class=\"content\"\u003e\u003c/p\u003e \u003cp\u003e \u003cp\u003eЭто второй параграф.\u003c/p\u003e\u003c/p\u003e \u003cp\u003e \u003c/div\u003e\u003c/p\u003e \u003cp\u003e\u003c/body\u003e\u003c/p\u003e \u003cp\u003e\u003c/html\u003e\u003c/p\u003e \u003cp\u003eDOM-представление этой структуры можно схематично показать так:\u003c/p\u003e \u003cp\u003eDocument\u003c/p\u003e \u003cp\u003e└── \u003chtml\u003e\u003c/p\u003e \u003cp\u003e ├── \u003chead\u003e\u003c/p\u003e \u003cp\u003e │ ├── \u003cmeta charset=\"UTF-8\"\u003e\u003c/p\u003e \u003cp\u003e │ └── \u003ctitle\u003e (Текстовый узел: \"Пример DOM\")\u003c/p\u003e \u003cp\u003e └── \u003cbody\u003e\u003c/p\u003e \u003cp\u003e ├── \u003ch1\u003e (Текстовый узел: \"Заголовок\")\u003c/p\u003e \u003cp\u003e ├── \u003cp id=\"intro\"\u003e (Текстовый узел: \"Это первый параграф.\")\u003c/p\u003e \u003cp\u003e └── \u003cdiv class=\"content\"\u003e\u003c/p\u003e \u003cp\u003e └── \u003cp\u003e (Текстовый узел: \"Это второй параграф.\")\u003c/p\u003e 7.2. Как найти элементы на странице \u003cp\u003eЧтобы манипулировать элементами, нам сначала нужно получить к ним доступ. JavaScript предоставляет несколько методов для поиска элементов в DOM.\u003c/p\u003e \u003cp\u003eА) Поиск по ID (getElementById)\u003c/p\u003e \u003cp\u003eТермин: ID (Identifier) — уникальный идентификатор элемента на странице. Каждый id должен быть уникален в пределах одного HTML-документа.\u003c/p\u003e \u003cp\u003eМетод document.getElementById(id) возвращает первый элемент, у которого указанный id.\u003c/p\u003e \u003cp\u003ejavascript\u003c/p\u003e \u003cp\u003e// Предполагая, что на странице есть \u003cp id=\"intro\"\u003e...\u003c/p\u003e\u003c/p\u003e \u003cp\u003elet introParagraph = document.getElementById(\"intro\");\u003c/p\u003e \u003cp\u003econsole.log(introParagraph); // Выведет объект \u003cp id=\"intro\"\u003e...\u003c/p\u003e\u003c/p\u003e \u003cp\u003e// Теперь мы можем работать с этим элементом:\u003c/p\u003e \u003cp\u003eintroParagraph.textContent = \"Новый текст для параграфа.\"; // Изменяем текст\u003c/p\u003e \u003cp\u003eБ) Поиск по именам тегов (getElementsByTagName)\u003c/p\u003e \u003cp\u003eМетод document.getElementsByTagName(tagName) возвращает HTML-коллекцию (похожа на массив, но не совсем) всех элементов с указанным именем тега.\u003c/p\u003e \u003cp\u003ehtml\u003c/p\u003e \u003cp\u003e\u003cul\u003e\u003c/p\u003e \u003cp\u003e \u003cli\u003eЭлемент 1\u003c/li\u003e\u003c/p\u003e \u003cp\u003e \u003cli\u003eЭлемент 2\u003c/li\u003e\u003c/p\u003e \u003cp\u003e\u003c/ul\u003e\u003c/p\u003e \u003cp\u003e\u003cp\u003eКакой-то текст.\u003c/p\u003e\u003c/p\u003e \u003cp\u003e\u003cul\u003e\u003c/p\u003e \u003cp\u003e \u003cli\u003eЭлемент 3\u003c/li\u003e\u003c/p\u003e \u003cp\u003e\u003c/ul\u003e\u003c/p\u003e \u003cp\u003ejavascript\u003c/p\u003e \u003cp\u003elet allParagraphs = document.getElementsByTagName(\"p\");\u003c/p\u003e \u003cp\u003econsole.log(allParagraphs); // HTMLCollection [ \u003cp\u003eКакой-то текст.\u003c/p\u003e ] (в данном случае)\u003c/p\u003e \u003cp\u003elet allLists = document.getElementsByTagName(\"ul\");\u003c/p\u003e \u003cp\u003econsole.log(allLists); // HTMLCollection [ \u003cul\u003e...\u003c/ul\u003e, \u003cul\u003e...\u003c/ul\u003e ]\u003c/p\u003e \u003cp\u003e// Доступ к элементам в коллекции по индексу\u003c/p\u003e \u003cp\u003econsole.log(allLists[0]); // Первый \u003cul\u003e\u003c/p\u003e \u003cp\u003econsole.log(allLists[1]); // Второй \u003cul\u003e\u003c/p\u003e \u003cp\u003e// Перебор коллекции (можно использовать for...of или обычный for)\u003c/p\u003e \u003cp\u003efor (let list of allLists) {\u003c/p\u003e \u003cp\u003e console.log(list);\u003c/p\u003e \u003cp\u003e}\u003c/p\u003e \u003cp\u003eВажно: getElementsByTagName возвращает живую коллекцию. Это значит, что если DOM изменится (например, добавятся новые элементы \u003cli\u003e), коллекция автоматически обновится.\u003c/p\u003e \u003cp\u003eВ) Поиск по именам классов (getElementsByClassName)\u003c/p\u003e \u003cp\u003eМетод document.getElementsByClassName(className) возвращает HTML-коллекцию всех элементов, у которых есть указанный CSS-класс. Можно передавать несколько классов, разделенных пробелом, но это будет искать элементы, у которых есть ВСЕ перечисленные классы.\u003c/p\u003e \u003cp\u003ehtml\u003c/p\u003e \u003cp\u003e\u003cdiv class=\"item important\"\u003eВажный элемент 1\u003c/div\u003e\u003c/p\u003e \u003cp\u003e\u003cdiv class=\"item\"\u003eОбычный элемент\u003c/div\u003e\u003c/p\u003e \u003cp\u003e\u003cdiv class=\"item important\"\u003eВажный элемент 2\u003c/div\u003e\u003c/p\u003e \u003cp\u003ejavascript\u003c/p\u003e \u003cp\u003elet importantItems = document.getElementsByClassName(\"important\");\u003c/p\u003e \u003cp\u003econsole.log(importantItems); // HTMLCollection [ \u003cdiv class=\"item important\"\u003e..., \u003cdiv class=\"item important\"\u003e...\u003c/div\u003e ]\u003c/p\u003e \u003cp\u003elet allItems = document.getElementsByClassName(\"item\");\u003c/p\u003e \u003cp\u003econsole.log(allItems); // HTMLCollection [ \u003cdiv class=\"item important\"\u003e..., \u003cdiv class=\"item\"\u003e..., \u003cdiv class=\"item important\"\u003e...\u003c/div\u003e ]\u003c/p\u003e \u003cp\u003e// Поиск элементов с двумя классами (очень редко нужно)\u003c/p\u003e \u003cp\u003elet itemAndImportant = document.getElementsByClassName(\"item important\");\u003c/p\u003e \u003cp\u003econsole.log(itemAndImportant); // HTMLCollection [ \u003cdiv class=\"item important\"\u003e...\u003c/div\u003e ]\u003c/p\u003e \u003cp\u003egetElementsByClassName также возвращает живую коллекцию.\u003c/p\u003e \u003cp\u003eГ) Современные и универсальные методы (querySelector, querySelectorAll)\u003c/p\u003e \u003cp\u003eЭти методы используют синтаксис CSS-селекторов, что делает их очень мощными и гибкими.\u003c/p\u003e \u003cp\u003edocument.querySelector(selector): Возвращает первый элемент, который соответствует указанному CSS-селектору.javascript// Поиск по ID\u003c/p\u003e \u003cp\u003elet introPara = document.querySelector(\"#intro\"); // То же, что getElementById(\"intro\")\u003c/p\u003e \u003cp\u003e// Поиск по имени тега\u003c/p\u003e \u003cp\u003elet firstH1 = document.querySelector(\"h1\");\u003c/p\u003e \u003cp\u003e// Поиск по классу\u003c/p\u003e \u003cp\u003elet firstImportantItem = document.querySelector(\".important\"); // Найдет первый элемент с классом \"important\"\u003c/p\u003e \u003cp\u003e// Поиск по имени тега внутри другого тега\u003c/p\u003e \u003cp\u003elet firstParagraphInDiv = document.querySelector(\"div p\"); // Найдет первый \u003cp\u003e внутри \u003cdiv\u003e\u003c/p\u003e \u003cp\u003e// Поиск по комбинации селекторов\u003c/p\u003e \u003cp\u003elet specificDiv = document.querySelector(\"div.content p\"); // Найдет \u003cp\u003e внутри \u003cdiv class=\"content\"\u003e\u003c/p\u003e \u003cp\u003edocument.querySelectorAll(selector): Возвращает NodeList (статическую коллекцию, похожую на массив, но не живую) всех элементов, которые соответствуют указанному CSS-селектору.javascript// Получить все параграфы\u003c/p\u003e \u003cp\u003elet allParagraphs = document.querySelectorAll(\"p\");\u003c/p\u003e \u003cp\u003econsole.log(allParagraphs); // NodeList [ \u003cp id=\"intro\"\u003e...\u003c/p\u003e, \u003cp\u003e...\u003c/p\u003e ]\u003c/p\u003e \u003cp\u003e// Получить все элементы с классом \"item\"\u003c/p\u003e \u003cp\u003elet allItems = document.querySelectorAll(\".item\");\u003c/p\u003e \u003cp\u003econsole.log(allItems);\u003c/p\u003e \u003cp\u003e// Получить все элементы h1, h2, h3\u003c/p\u003e \u003cp\u003elet headings = document.querySelectorAll(\"h1, h2, h3\");\u003c/p\u003e \u003cp\u003e// Получить все элементы li внутри ul\u003c/p\u003e \u003cp\u003elet listItems = document.querySelectorAll(\"ul li\");\u003c/p\u003e \u003cp\u003e// Перебор NodeList (можно использовать forEach, for...of)\u003c/p\u003e \u003cp\u003elistItems.forEach((item, index) =\u003e {\u003c/p\u003e \u003cp\u003e console.log(`List item ${index + 1}: ${item.textContent}`);\u003c/p\u003e \u003cp\u003e});\u003c/p\u003e \u003cp\u003eКогда использовать какой метод:\u003c/p\u003e \u003cp\u003egetElementById: Если у вас есть id и вам нужен один конкретный элемент. Очень быстро.\u003c/p\u003e \u003cp\u003equerySelector: Универсальный метод для поиска первого элемента по любому CSS-селектору. Гибкий и удобный.\u003c/p\u003e \u003cp\u003equerySelectorAll: Для поиска всех элементов, соответствующих CSS-селектору. Возвращает NodeList, который удобно перебирать.\u003c/p\u003e \u003cp\u003egetElementsByTagName, getElementsByClassName: Могут быть немного быстрее querySelectorAll в специфических случаях, но querySelectorAll часто предпочтительнее из-за его универсальности и поддержки CSS-селекторов.\u003c/p\u003e 7.3. Изменение содержимого и атрибутов элементов \u003cp\u003eПолучив доступ к элементу, мы можем изменять его содержимое, атрибуты и стили.\u003c/p\u003e \u003cp\u003eА) Изменение текстового содержимого:\u003c/p\u003e \u003cp\u003eelement.textContent: Устанавливает или возвращает текст внутри элемента. HTML-теги внутри текста будут отображаться как обычный текст.\u003c/p\u003e \u003cp\u003eelement.innerHTML: Устанавливает или возвращает HTML-код внутри элемента. Это значит, что если вы присвоите сюда строку с HTML-тегами, они будут интерпретированы браузером. Используйте с осторожностью, чтобы избежать XSS-уязвимостей (если содержимое приходит от пользователя).\u003c/p\u003e \u003cp\u003ehtml\u003c/p\u003e \u003cp\u003e\u003cp id=\"myParagraph\"\u003eСтарый текст.\u003c/p\u003e\u003c/p\u003e \u003cp\u003e\u003cdiv id=\"myDiv\"\u003e\u003c/div\u003e\u003c/p\u003e \u003cp\u003ejavascript\u003c/p\u003e \u003cp\u003elet paragraph = document.getElementById(\"myParagraph\");\u003c/p\u003e \u003cp\u003e// Изменение текста\u003c/p\u003e \u003cp\u003eparagraph.textContent = \"Новый текст.\"; // Отобразится как обычный текст\u003c/p\u003e \u003cp\u003econsole.log(paragraph.textContent); // \"Новый текст.\"\u003c/p\u003e \u003cp\u003e// Изменение HTML-содержимого\u003c/p\u003e \u003cp\u003elet div = document.getElementById(\"myDiv\");\u003c/p\u003e \u003cp\u003ediv.innerHTML = \"\u003cstrong\u003eЖирный текст\u003c/strong\u003e и \u003cem\u003eкурсив\u003c/em\u003e.\"; // HTML-теги будут обработаны\u003c/p\u003e \u003cp\u003econsole.log(div.innerHTML); // \"\u003cstrong\u003eЖирный текст\u003c/strong\u003e и \u003cem\u003eкурсив\u003c/em\u003e.\"\u003c/p\u003e \u003cp\u003e// Если использовать textContent вместо innerHTML с HTML-тегами\u003c/p\u003e \u003cp\u003ediv.textContent = \"\u003cstrong\u003eЖирный текст\u003c/strong\u003e\"; // Отобразится как \"\u003cstrong\u003eЖирный текст\u003c/strong\u003e\" (буквально)\u003c/p\u003e \u003cp\u003eБ) Изменение атрибутов:\u003c/p\u003e \u003cp\u003eПрямой доступ (для стандартных атрибутов): Если атрибут является стандартным свойством элемента (например, id, src, href, class, value), вы можете получить или установить его напрямую.html\u003cimg id=\"myImage\" src=\"image.jpg\" alt=\"Описание\"\u003e\u003c/p\u003e \u003cp\u003e\u003ca href=\"https://example.com\" id=\"myLink\"\u003eСсылка\u003c/a\u003e\u003c/p\u003e \u003cp\u003ejavascriptlet img = document.getElementById(\"myImage\");\u003c/p\u003e \u003cp\u003eimg.src = \"new_image.png\"; // Изменяем источник изображения\u003c/p\u003e \u003cp\u003eimg.alt = \"Новое описание\"; // Изменяем атрибут alt\u003c/p\u003e \u003cp\u003elet link = document.getElementById(\"myLink\");\u003c/p\u003e \u003cp\u003elink.href = \"https://new-example.com\"; // Изменяем ссылку\u003c/p\u003e \u003cp\u003elink.textContent = \"Перейти на новый сайт\"; // Изменяем текст ссылки\u003c/p\u003e \u003cp\u003eМетоды getAttribute(), setAttribute(), removeAttribute(): Более универсальные методы, которые работают с любыми атрибутами, включая пользовательские (data-*).html\u003cbutton data-action=\"save\"\u003eСохранить\u003c/button\u003e\u003c/p\u003e \u003cp\u003ejavascriptlet button = document.querySelector('button');\u003c/p\u003e \u003cp\u003e// Получить атрибут\u003c/p\u003e \u003cp\u003econsole.log(button.getAttribute('data-action')); // \"save\"\u003c/p\u003e \u003cp\u003econsole.log(button.getAttribute('disabled')); // null (если атрибута нет)\u003c/p\u003e \u003cp\u003e// Установить атрибут\u003c/p\u003e \u003cp\u003ebutton.setAttribute('disabled', ''); // Делаем кнопку неактивной (значение атрибута может быть пустым)\u003c/p\u003e \u003cp\u003ebutton.setAttribute('data-action', 'delete'); // Изменяем атрибут\u003c/p\u003e \u003cp\u003e// Удалить атрибут\u003c/p\u003e \u003cp\u003ebutton.removeAttribute('disabled');\u003c/p\u003e \u003cp\u003eВ) Изменение стилей:\u003c/p\u003e \u003cp\u003eСтили элемента можно изменять через его свойство style. Каждый CSS-свойство, написанное через дефис (например, background-color), преобразуется в camelCase (например, backgroundColor) для использования в JavaScript.\u003c/p\u003e \u003cp\u003ehtml\u003c/p\u003e \u003cp\u003e\u003cdiv id=\"myBox\" style=\"width: 100px; height: 100px; background-color: lightblue;\"\u003e\u003c/div\u003e\u003c/p\u003e \u003cp\u003ejavascript\u003c/p\u003e \u003cp\u003elet box = document.getElementById(\"myBox\");\u003c/p\u003e \u003cp\u003e// Изменение стиля\u003c/p\u003e \u003cp\u003ebox.style.width = \"200px\"; // Устанавливаем ширину\u003c/p\u003e \u003cp\u003ebox.style.height = \"150px\"; // Устанавливаем высоту\u003c/p\u003e \u003cp\u003ebox.style.backgroundColor = \"lightgreen\"; // Устанавливаем фоновый цвет\u003c/p\u003e \u003cp\u003ebox.style.border = \"2px solid red\"; // Добавляем рамку\u003c/p\u003e \u003cp\u003e// Получение текущего стиля (может быть сложнее, чем кажется, если стили заданы в CSS-файлах, а не инлайново)\u003c/p\u003e \u003cp\u003econsole.log(box.style.width); // \"200px\" (если был инлайново задан или последний измененный)\u003c/p\u003e \u003cp\u003eРабота с классами CSS:\u003c/p\u003e \u003cp\u003eЧасто гораздо удобнее управлять стилями, добавляя или удаляя CSS-классы, чем менять отдельные свойства style. Это позволяет отделять логику JavaScript от стилизации.\u003c/p\u003e \u003cp\u003eelement.classList: Это свойство возвращает объект DOMTokenList, который имеет удобные методы для управления классами:add(className): Добавляет класс.\u003c/p\u003e \u003cp\u003eremove(className): Удаляет класс.\u003c/p\u003e \u003cp\u003etoggle(className): Добавляет класс, если его нет, и удаляет, если он есть.\u003c/p\u003e \u003cp\u003econtains(className): Проверяет, есть ли у элемента указанный класс (возвращает true или false).\u003c/p\u003e \u003cp\u003ehtml\u003c/p\u003e \u003cp\u003e\u003cdiv id=\"myDivWithClass\" class=\"box normal\"\u003e\u003c/div\u003e\u003c/p\u003e \u003cp\u003ejavascript\u003c/p\u003e \u003cp\u003elet divWithClass = document.getElementById(\"myDivWithClass\");\u003c/p\u003e \u003cp\u003e// Добавить класс\u003c/p\u003e \u003cp\u003edivWithClass.classList.add(\"highlight\"); // Класс \"highlight\" будет добавлен\u003c/p\u003e \u003cp\u003econsole.log(divWithClass.className); // \"box normal highlight\"\u003c/p\u003e \u003cp\u003e// Удалить класс\u003c/p\u003e \u003cp\u003edivWithClass.classList.remove(\"normal\"); // Класс \"normal\" будет удален\u003c/p\u003e \u003cp\u003econsole.log(divWithClass.className); // \"box highlight\"\u003c/p\u003e \u003cp\u003e// Переключить класс\u003c/p\u003e \u003cp\u003edivWithClass.classList.toggle(\"active\"); // Класс \"active\" будет добавлен\u003c/p\u003e \u003cp\u003edivWithClass.classList.toggle(\"active\"); // Класс \"active\" будет удален\u003c/p\u003e \u003cp\u003econsole.log(divWithClass.classList.contains(\"highlight\")); // true\u003c/p\u003e \u003cp\u003econsole.log(divWithClass.classList.contains(\"normal\")); // false\u003c/p\u003e \u003cp\u003eCSS, который будет работать с этими классами:\u003c/p\u003e \u003cp\u003ecss\u003c/p\u003e \u003cp\u003e.box {\u003c/p\u003e \u003cp\u003e width: 100px;\u003c/p\u003e \u003cp\u003e height: 50px;\u003c/p\u003e \u003cp\u003e border: 1px solid black;\u003c/p\u003e \u003cp\u003e}\u003c/p\u003e \u003cp\u003e.highlight {\u003c/p\u003e \u003cp\u003e background-color: yellow;\u003c/p\u003e \u003cp\u003e font-weight: bold;\u003c/p\u003e \u003cp\u003e}\u003c/p\u003e \u003cp\u003e.active {\u003c/p\u003e \u003cp\u003e border-color: blue;\u003c/p\u003e \u003cp\u003e transform: scale(1.1); /* Небольшое увеличение */\u003c/p\u003e \u003cp\u003e}\u003c/p\u003e 7.4. Создание и удаление элементов \u003cp\u003eJavaScript может не только изменять существующие элементы, но и создавать новые, а также удалять их из DOM.\u003c/p\u003e \u003cp\u003eСоздание элемента:\u003c/p\u003e \u003cp\u003edocument.createElement(tagName): Создает новый элемент с указанным именем тега. Этот элемент пока не находится на странице, он существует только в памяти.javascriptlet newParagraph = document.createElement(\"p\"); // Создали элемент \u003cp\u003e\u003c/p\u003e \u003cp\u003enewParagraph.textContent = \"Это новый параграф, созданный JavaScript.\";\u003c/p\u003e \u003cp\u003enewParagraph.classList.add(\"info-text\"); // Добавили класс\u003c/p\u003e \u003cp\u003eДобавление элемента на страницу:\u003c/p\u003e \u003cp\u003eЧтобы созданный элемент появился на странице, его нужно добавить к какому-либо существующему элементу.\u003c/p\u003e \u003cp\u003eparentElement.appendChild(childElement): Добавляет childElement как последнего потомка parentElement.javascript// Предположим, у нас есть \u003cdiv id=\"container\"\u003e\u003c/div\u003e\u003c/p\u003e \u003cp\u003elet container = document.getElementById(\"container\");\u003c/p\u003e \u003cp\u003elet newParagraph = document.createElement(\"p\");\u003c/p\u003e \u003cp\u003enewParagraph.textContent = \"Добавлен в конец контейнера.\";\u003c/p\u003e \u003cp\u003econtainer.appendChild(newParagraph); // Параграф появится внутри div#container\u003c/p\u003e \u003cp\u003eparentElement.insertBefore(newElement, referenceElement): Вставляет newElement перед referenceElement внутри parentElement.javascript// Предположим, у нас есть \u003cdiv id=\"container\"\u003e \u003cp id=\"existingPara\"\u003eСуществующий\u003c/p\u003e \u003c/div\u003e\u003c/p\u003e \u003cp\u003elet container = document.getElementById(\"container\");\u003c/p\u003e \u003cp\u003elet existingPara = document.getElementById(\"existingPara\");\u003c/p\u003e \u003cp\u003elet newPara = document.createElement(\"p\");\u003c/p\u003e \u003cp\u003enewPara.textContent = \"Добавлен перед существующим.\";\u003c/p\u003e \u003cp\u003econtainer.insertBefore(newPara, existingPara); // Новый параграф появится перед existingPara\u003c/p\u003e \u003cp\u003eУдаление элемента:\u003c/p\u003e \u003cp\u003eelement.remove(): Удаляет элемент из DOM.javascriptlet elementToRemove = document.getElementById(\"itemToDelete\");\u003c/p\u003e \u003cp\u003eif (elementToRemove) { // Важно проверять, существует ли элемент, прежде чем удалять\u003c/p\u003e \u003cp\u003e elementToRemove.remove();\u003c/p\u003e \u003cp\u003e}\u003c/p\u003e \u003cp\u003eparentElement.removeChild(childElement): Более старый метод, который удаляет childElement из parentElement.javascriptlet parent = document.getElementById(\"parent\");\u003c/p\u003e \u003cp\u003elet child = document.getElementById(\"child\");\u003c/p\u003e \u003cp\u003eif (parent \u0026\u0026 child) {\u003c/p\u003e \u003cp\u003e parent.removeChild(child);\u003c/p\u003e \u003cp\u003e}\u003c/p\u003e 7.5. Работа с классами CSS (краткое повторение) \u003cp\u003eМы уже видели classList для добавления, удаления и переключения классов. Это наиболее рекомендуемый способ управления стилями элемента с помощью JavaScript.\u003c/p\u003e \u003cp\u003eПример 7.5.1: Динамическое изменение стиля кнопки\u003c/p\u003e \u003cp\u003ehtml\u003c/p\u003e \u003cp\u003e\u003cbutton id=\"myButton\" class=\"btn\"\u003eНажми меня\u003c/button\u003e\u003c/p\u003e \u003cp\u003ecss\u003c/p\u003e \u003cp\u003e.btn {\u003c/p\u003e \u003cp\u003e padding: 10px 20px;\u003c/p\u003e \u003cp\u003e border: 1px solid gray;\u003c/p\u003e \u003cp\u003e background-color: lightgray;\u003c/p\u003e \u003cp\u003e cursor: pointer;\u003c/p\u003e \u003cp\u003e}\u003c/p\u003e \u003cp\u003e.btn.active { /* Стиль для активной кнопки */\u003c/p\u003e \u003cp\u003e background-color: dodgerblue;\u003c/p\u003e \u003cp\u003e color: white;\u003c/p\u003e \u003cp\u003e font-weight: bold;\u003c/p\u003e \u003cp\u003e}\u003c/p\u003e \u003cp\u003ejavascript\u003c/p\u003e \u003cp\u003elet button = document.getElementById(\"myButton\");\u003c/p\u003e \u003cp\u003ebutton.addEventListener(\"click\", function() { // Добавим обработчик события клика (об этом позже)\u003c/p\u003e \u003cp\u003e button.classList.toggle(\"active\"); // Переключит класс 'active' при каждом клике\u003c/p\u003e \u003cp\u003e});\u003c/p\u003e \u003cp\u003eПри каждом нажатии на кнопку будет добавляться или удаляться класс active, что будет менять ее внешний вид согласно CSS-правилам.\u003c/p\u003e \u003cp\u003eПрактическое задание:\u003c/p\u003e \u003cp\u003eСоздайте простую HTML-страницу с \u003ch1\u003e, \u003cp\u003e и \u003cul\u003e.Используйте document.getElementById() для доступа к \u003ch1\u003e и измените его текст.\u003c/p\u003e"},"reviews":{"total_count":0,"page":1,"page_size":10,"data":[]},"pageNumber":"pagenum-5","blogs":{"total_count":253,"page":1,"page_size":4,"data":[{"id":474,"title":"Как быстро выучить тренд","description":"Как выучить тренд","created_at":"2025-09-02T00:00:00","rating":3,"reviews":7,"cover":"","books":[23857872,22059813,73001407],"voted_users":2,"alias":"kak-bystro-vyuchit-trend"},{"id":470,"title":"Как быстро выучить чеченский язык","description":"Как выучить чеченский","created_at":"2025-08-09T00:00:00","rating":5,"reviews":11,"cover":"","books":[72995372,71522269,72787891],"voted_users":1,"alias":"kak-bystro-vyuchit-chechenskii-iazyk"},{"id":200,"title":"Как легко выучить спряжение глаголов и исключения","description":"Как легко выучить глаголы исключения 2 спряжения","created_at":"2025-04-13T00:00:00","rating":5,"reviews":9,"cover":"","books":[23168099,42580386,65104487],"voted_users":2,"alias":"kak-legko-vyuchit-spriazhenie-glagolov-i-iskliucheniia"},{"id":78,"title":"Как легко выучить состав числа до 10","description":"Как быстро выучить состав числа до 10","created_at":"2025-11-07T00:00:00","rating":5,"reviews":9,"cover":"","books":[42154287,10245323,66674842],"voted_users":1,"alias":"kak-legko-vyuchit-sostav-chisla-do-10"}]}},"__N_SSP":true},"page":"/author/[alias]/[bookAlias]/read/[pageNumber]","query":{"alias":"aleksandr-olshevski","bookAlias":"kniga-javascript-ot-osnov-do-full-stack-razrabotki-72648025-1242138","pageNumber":"pagenum-5"},"buildId":"yTY-zY0j9FaxVIua4mb0r","isFallback":false,"isExperimentalCompile":false,"gssp":true,"scriptLoader":[]}</script></body></html>
Атрибуты (Attributes): Атрибуты HTML-тегов (например, src в теге , href в теге , class или id) также являются узлами, но они обычно связаны с узлами-элементами.
Текстовые узлы (Text Nodes): Текст внутри HTML-элементов (например, “Привет, мир!” внутри тега
) также является узлом.
Пример HTML-структуры и ее DOM-представления:
html
Заголовок
Это первый параграф.
DOM-представление этой структуры можно схематично показать так:
Document
└──
├──
│ ├──
│ └──