JavaScript · Справочник по DOM и массивам
JS
SilverTests.ru · Справочник
Всё что нужно для работы со страницей
JavaScript — Справочник
DOM, события, массивы, строки, localStorage
1Поиск элементов на странице
Прежде чем менять что-то на странице, нужно найти элемент. В JavaScript для этого есть три основных метода.
getElementById — поиск по id
Находит один элемент по его атрибуту id. Если такого id нет — вернёт null.
1// HTML: <div id="catalog"></div>
2const catalog = document.getElementById("catalog");
3catalog.textContent = "Привет!";
querySelector — поиск по CSS-селектору
Находит первый элемент, подходящий под CSS-селектор. Точка — класс, решётка — id, можно комбинировать.
1const btn = document.querySelector(".add-btn"); // первая кнопка с классом
2const name = card.querySelector(".name"); // внутри конкретного элемента
3const el = document.querySelector("#status"); // по id (то же что getElementById)
querySelectorAll — найти ВСЕ
Возвращает коллекцию всех подходящих элементов. Перебирается через forEach.
1const buttons = document.querySelectorAll(".filter-btn");
2
3buttons.forEach(function(btn) {
4 console.log(btn.textContent); // выведет текст каждой кнопки
5});
| Метод | Что ищет | Сколько возвращает |
|---|
getElementById | по id | один элемент |
querySelector | по CSS-селектору | первый найденный |
querySelectorAll | по CSS-селектору | все найденные |
2Создание и вставка элементов
Чтобы добавить новый элемент на страницу — три шага: создать, заполнить, вставить.
createElement + appendChild
1// 1. Создать
2const card = document.createElement("div");
3
4// 2. Заполнить
5card.className = "card";
6card.innerHTML = "<div class=\"name\">iPhone</div>";
7
8// 3. Вставить в контейнер
9document.getElementById("catalog").appendChild(card);
createElement — создаёт элемент, но он пока «висит в воздухе» — не на странице.
appendChild — вставляет элемент внутрь другого, в конец.
innerHTML vs textContent
| Свойство | Что делает | Когда использовать |
|---|
innerHTML | Записывает HTML-разметку | Нужны теги: <b>, <div> |
textContent | Записывает только текст | Простой текст без разметки |
1el.innerHTML = "<b>Жирный</b> текст"; // HTML — теги сработают
2el.textContent = "Просто текст"; // только текст — безопаснее
Перед отрисовкой очищайте контейнер: catalog.innerHTML = ""; — иначе элементы будут дублироваться при каждом вызове.
3События — addEventListener
Чтобы реагировать на действия пользователя (клик, ввод текста), нужно повесить обработчик события.
click — клик мышкой
1button.addEventListener("click", function() {
2 // этот код выполнится при клике
3 console.log("Нажали!");
4});
input — ввод текста (живой поиск)
Событие input срабатывает при каждом символе. Это и делает поиск «живым». Внутри обработчика this.value — текущий текст поля.
input — при каждом нажатии (живой поиск).
change — только при потере фокуса (после Enter/Tab). Для поиска не подходит!
Почему addEventListener, а не onclick?
addEventListener позволяет повесить несколько обработчиков на один элемент. А onclick — только один, и новый затирает старый. Поэтому в современном JS используют только addEventListener.
4Классы и data-атрибуты
classList — управление CSS-классами
Три основных метода — добавить, убрать, переключить:
1btn.classList.add("active"); // добавить класс
2btn.classList.remove("active"); // убрать класс
3btn.classList.toggle("active"); // если есть — убрать, если нет — добавить
Типичный паттерн — убрать у всех, добавить на нажатую:
1buttons.forEach(function(b) {
2 b.classList.remove("active"); // убрать у всех
3});
4btn.classList.add("active"); // добавить на нажатую
dataset — чтение data-атрибутов
В HTML можно хранить данные в атрибутах data-*. В JS они доступны через dataset:
1// HTML: <button data-cat="аудио">Аудио</button>
2
3var category = btn.dataset.cat; // "аудио"
Атрибут data-cat → свойство dataset.cat
Атрибут data-color → свойство dataset.color
Атрибут data-user-id → свойство dataset.userId (дефис → camelCase)
style.display — показать/скрыть
1el.style.display = "none"; // скрыть элемент
2el.style.display = "block"; // показать элемент
5Массивы — перебор и преобразование
forEach — перебрать каждый элемент
Первый аргумент функции — элемент, второй (необязательный) — его индекс.
1heroes.forEach(function(hero, index) {
2 console.log(index, hero.name);
3});
4// 0 "Кайто"
5// 1 "Люмина"
6// 2 "Рокки"
filter — отобрать по условию
Создаёт новый массив — только элементы, для которых функция вернула true. Исходный массив не меняется.
1var mages = heroes.filter(function(h) {
2 return h.class === "маг";
3});
Фильтры можно вызывать цепочкой:
1var result = heroes
2 .filter(function(h) { return h.element === "огонь"; })
3 .filter(function(h) { return h.power > 80; });
sort — сортировка
Важно: метод sort() изменяет исходный массив! Чтобы не испортить оригинал — сортируй копию.
1// По числу (возрастание):
2var sorted = [...heroes].sort(function(a, b) {
3 return a.power - b.power;
4});
5
6// По числу (убывание):
7var sorted = [...heroes].sort(function(a, b) {
8 return b.power - a.power;
9});
1// По строке (кириллица!):
2var sorted = [...heroes].sort(function(a, b) {
3 return a.name.localeCompare(b.name);
4});
a - b → по возрастанию (от маленьких к большим)
b - a → по убыванию (от больших к маленьким)
localeCompare — правильно сортирует строки, включая кириллицу
reduce — свернуть в одно значение
«Проходит» по массиву, накапливая результат. Первый аргумент функции — аккумулятор, второй — текущий элемент. В конце — начальное значение (обычно 0).
1var total = cart.reduce(function(sum, item) {
2 return sum + item.price;
3}, 0);
Как работает reduce шаг за шагом?
Допустим, [100, 200, 300].reduce(fn, 0):
Шаг 1: sum=0, x=100 → 0+100 = 100
Шаг 2: sum=100, x=200 → 100+200 = 300
Шаг 3: sum=300, x=300 → 300+300 = 600
Результат: 600
6Массивы — добавление и удаление
push — добавить в конец
1cart.push(item); // добавить товар в корзину
splice — удалить по индексу
Первый аргумент — позиция, второй — сколько удалить.
1var arr = ["а", "б", "в", "г"];
2arr.splice(1, 1); // удалить 1 элемент с позиции 1
3// arr = ["а", "в", "г"]
Типичный паттерн — удаление в цикле forEach по индексу:
1cart.forEach(function(item, index) {
2 removeBtn.addEventListener("click", function() {
3 cart.splice(index, 1); // удалить этот элемент
4 renderCart(); // перерисовать!
5 });
6});
Копирование массива
1var copy = [...arr]; // через spread (короче)
2var copy = arr.slice(); // через slice (старый способ)
7Строки и поиск подстроки
toLowerCase — привести к нижнему регистру
1"iPhone".toLowerCase(); // "iphone"
2"МОСКВА".toLowerCase(); // "москва"
includes — есть ли подстрока?
Возвращает true или false. Регистрозависимый! Поэтому всегда используй вместе с toLowerCase:
1"iPhone 15".includes("Phone"); // false (регистр!)
2"iPhone 15".toLowerCase().includes("phone"); // true ✓
Шаблонные строки (бэктики)
Бэктики `...` вместо кавычек. Внутри ${...} — любое выражение JS. Поддерживают многострочность.
1card.innerHTML = `
2 <div class="name">${item.name}</div>
3 <div class="price">${item.price} ₽</div>
4`;
5
6status.textContent = `Показано: ${items.length} из ${total}`;
8localStorage — сохранение данных
localStorage — хранилище браузера. Данные сохраняются даже после закрытия вкладки. Но хранит только строки, поэтому массивы и объекты нужно превращать в JSON.
Сохранение
1function saveCart() {
2 localStorage.setItem("cart", JSON.stringify(cart));
3}
JSON.stringify — превращает массив/объект в строку.
[{name:"iPhone"}] → "[{\"name\":\"iPhone\"}]"
Загрузка (с защитой!)
1var saved = localStorage.getItem("cart");
2
3if (saved) {
4 try {
5 var data = JSON.parse(saved);
6 if (Array.isArray(data)) {
7 cart = data;
8 }
9 } catch (e) {
10 // невалидный JSON — игнорируем
11 }
12}
стр 4 — try/catch ловит ошибку, если JSON.parse не сможет разобрать строку.
стр 6 — Array.isArray проверяет, что результат — массив, а не объект или число.
Двойная защита: и от синтаксической ошибки, и от неверного типа данных.
Удаление
1localStorage.removeItem("cart"); // удалить один ключ
| Метод | Что делает |
|---|
setItem(key, val) | Сохранить строку |
getItem(key) | Прочитать (или null) |
removeItem(key) | Удалить |
JSON.stringify(obj) | Объект → строка |
JSON.parse(str) | Строка → объект |
9Полезные мелочи
Тернарный оператор
Короткая запись if/else. Возвращает одно из двух значений:
1// условие ? еслиДа : еслиНет
2
3cartEmpty.style.display = cart.length > 0 ? "none" : "block";
4
5// Защита от деления на 0:
6var avg = cart.length > 0 ? Math.round(total / cart.length) : 0;
=== vs ==
| Оператор | Как сравнивает | Пример |
|---|
=== | Без преобразования типов | 5 === "5" → false |
== | С преобразованием типов | 5 == "5" → true |
Используйте === — меньше сюрпризов. == может дать неожиданные результаты: 0 == false → true, "" == 0 → true.
Math.round, parseInt
1Math.round(4.6); // 5 — округление до ближайшего
2Math.round(4.3); // 4
3
4parseInt("42"); // 42 — строка → целое число
5parseInt("3.14"); // 3 — отбрасывает дробную часть
★Шпаргалка — все методы
| Задача | Метод |
|---|
| Найти по id | document.getElementById("id") |
| Найти первый по селектору | document.querySelector(".class") |
| Найти все по селектору | document.querySelectorAll(".class") |
| Создать элемент | document.createElement("div") |
| Вставить в контейнер | parent.appendChild(child) |
| Записать HTML внутрь | el.innerHTML = "..." |
| Записать текст | el.textContent = "..." |
| Очистить элемент | el.innerHTML = "" |
| Обработчик клика | el.addEventListener("click", fn) |
| Обработчик ввода | el.addEventListener("input", fn) |
| Добавить CSS-класс | el.classList.add("active") |
| Убрать CSS-класс | el.classList.remove("active") |
| Переключить класс | el.classList.toggle("active") |
| Прочитать data-атрибут | el.dataset.cat |
| Скрыть / показать | el.style.display = "none"/"block" |
| Перебрать массив | arr.forEach(function(el, i) {...}) |
| Отфильтровать | arr.filter(function(el) {...}) |
| Отсортировать | [...arr].sort(function(a,b) {...}) |
| Посчитать сумму | arr.reduce(function(s,el) {...}, 0) |
| Добавить в конец | arr.push(element) |
| Удалить по индексу | arr.splice(index, 1) |
| Скопировать | [...arr] или arr.slice() |
| К нижнему регистру | str.toLowerCase() |
| Есть ли подстрока? | str.includes("text") |
| Сохранить в браузере | localStorage.setItem(key, val) |
| Прочитать | localStorage.getItem(key) |
| Удалить | localStorage.removeItem(key) |
| Объект → строка | JSON.stringify(obj) |
| Строка → объект | JSON.parse(str) |