Code Ready | Frontend

Element.toggleAttribute() — нативное переключение DOM-атрибутов!

В DOM многие состояния элементов представлены через наличие или отсутствие атрибутов: disabled, hidden, required и пользовательские атрибуты состояния компонентов. Element.toggleAttribute() предоставляет нативный механизм для управления такими состояниями без ручной проверки текущего значения.

До появления toggleAttribute() подобные операции обычно реализовывались через отдельную проверку наличия атрибута и последующее добавление либо удаление:
const button = document.querySelector('button');

if (button.hasAttribute('disabled')) {
button.removeAttribute('disabled');
} else {
button.setAttribute('disabled', '');
}

Element.toggleAttribute() объединяет эту логику в один вызов. Метод проверяет текущее состояние атрибута и выполняет противоположное действие.
button.toggleAttribute('disabled');

Если атрибут отсутствует — он будет добавлен. При повторном вызове — удалён.

Для boolean HTML-атрибутов важно учитывать, что браузер анализирует сам факт присутствия атрибута, а не его значение.

Submit


а также

Submit


имеют одинаковое поведение.

Метод возвращает boolean, отражающий состояние атрибута после выполнения операции:
const isDisabled = button.toggleAttribute('disabled');

console.log(isDisabled); // true

Дополнительно toggleAttribute() поддерживает второй аргумент force, который позволяет явно задать требуемое состояние вместо переключения.
button.toggleAttribute('disabled', true); // добавить атрибут
button.toggleAttribute('disabled', false); // удалить атрибут

Этот вариант удобен при синхронизации DOM с состоянием приложения, когда итоговое значение уже вычислено:
input.toggleAttribute('required', isRequired);

toggleAttribute() работает с любыми валидными DOM-атрибутами, включая пользовательские флаги состояния компонентов:
const card = document.querySelector('.card');

card.toggleAttribute('data-selected');

После выполнения:


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

Например, управление видимостью через стандартный атрибут hidden:
const block = document.querySelector('.details');

block.toggleAttribute('hidden');

🔥 Element.toggleAttribute() определён в DOM Standard и предоставляет единый API для добавления и удаления атрибутов без необходимости вручную комбинировать hasAttribute(), setAttribute() и removeAttribute(). Полезный метод, который делает работу с DOM-состояниями более лаконичной и предсказуемой. Поддерживается всеми современными браузерами.

📣 Code Ready | #практика

Что фронтенд может, а что не может, когда лёг хостинг

Недавно натыкался на новость — у одного из хостеров случился короткий сбой на уровне энергоснабжения дата-центра. Задело часть их инфраструктуры и клиентские сервисы. Восстановили быстро, но ЛК и часть сайтов на их хостинге минут на 40 ушли в недоступность.

В этот момент пользователь видит именно фронт. И самое неприятное — ты физически не можешь повлиять на ситуацию. Весь стек упирается в то, что происходит на площадке, которую ты даже и не видел никогда.

Такие истории — повод присмотреться к площадкам с продуманной инфраструктурой, а не разбираться постфактум. В рамках своих задач недавно зацепился за ЦОД Московского кластера видеоигр и анимации.

По питанию там два независимых ввода, ИБП, умные PDU. Охлаждение с изоляцией горячих/холодных коридоров. Сеть и хранение тоже задублированы — резервирование коммутаторов, диски арендных серверов в RAID-массивах. По площадке — 21 стойка, до 20 кВт на каждую, SLA 99,95%. Из железа — GPU-серверы (RTX Ada, H100). Там же и колокейшн от юнита за 4 000 р/мес до стойки 42U от 105 000 р/мес.

Кому интересно, вот страница ЦОДа с характеристиками. Я, например, после всех историй со сбоями начал смотреть на дата-центры иначе.

А если площадка все-таки легла, в ход идут инструменты фронта:

• offline-страница через Service Worker — только для тех, кто уже открывал сайт раньше и SW успел закешироваться; 

• закешированные данные из localStorage/IndexedDB вместо пустого экрана — тоже нужен предыдущий визит; 

• retry с backoff нужны не ради выживания в простой. Их цель — поберечь лежащий бэкенд и вовремя выдать вменяемую ошибку вместо бесконечной загрузки; 

• статус-страница на отдельном хостинге/CDN.

Все остальное зависит от того, что происходит на стороне инфраструктуры.

📣 Code Ready

innerText vs textContent — как обычное чтение DOM может заставить браузер пересчитать layout!

DOM хранит структуру документа отдельно от того, как эта структура отображается пользователю. textContent работает на уровне DOM-дерева. Он проходит по текстовым узлам и собирает содержимое без анализа CSS, размеров элементов или текущего состояния отображения.
const text = element.textContent;

innerText работает иначе. Чтобы вернуть текст в том виде, в котором его видит пользователь, браузеру необходимо учитывать CSS, видимость элементов, переносы строк и актуальное состояние компоновки.
const text = element.innerText;

Именно поэтому простое чтение свойства иногда может быть дорогой операцией:
element.style.width = '400px';

const text = element.innerText;

После изменения стиля браузер помечает компоновку как устаревшую. Если следующая операция требует данных о визуальном состоянии страницы, браузеру может потребоваться немедленно выполнить перерасчёт. Это называется принудительным синхронным перерасчётом layout.

Похожий механизм работает с другими свойствами, зависящими от текущей геометрии страницы:
element.style.width = '400px';

const width = element.offsetWidth;

К этой же категории относятся offsetHeight, getBoundingClientRect() и чтение некоторых свойств прокрутки (scrollTop, scrollHeight и другие).

Проблема обычно появляется не из-за одного вызова, а из-за постоянного смешивания операций записи и чтения:
elements.forEach(element => {
element.style.width = '400px';
console.log(element.innerText);
});

В таком случае браузер может постоянно выполнять цикл: запись — устаревшая компоновка — чтение — расчёт компоновки.

Это приводит к частым лишним перерасчётам компоновки (layout thrashing). Гораздо эффективнее разделять изменение состояния и чтение данных:
elements.forEach(element => {
element.style.width = '400px';
});

const values = elements.map(
element => element.innerText
);

Важно понимать: innerText не является медленным сам по себе. Если состояние компоновки уже актуально, чтение может быть дешёвым. Проблема возникает тогда, когда браузеру приходится синхронизировать DOM с текущим визуальным состоянием страницы.

Если нужно получить данные из DOM, обычно достаточно textContent. Если нужен текст именно в том виде, в котором его воспринимает пользователь, используется innerText.

🔥 Разница между ними не только в возвращаемой строке. textContent работает с моделью документа, а innerText — с моделью отображения. В производительных интерфейсах это различие может определить, будет ли чтение обычным получением текстового содержимого или причиной перерасчёта компоновки.

📣 Code Ready | #практика

TreeWalker — последовательный обход DOM без создания промежуточной коллекции!

При обходе DOM часто используют рекурсию или querySelectorAll(). Это рабочие подходы, но они подходят не для всех задач: рекурсивный обход требует дополнительной логики, а querySelectorAll() сразу формирует статический NodeList со всеми найденными элементами.

DOM API предоставляет интерфейс TreeWalker, который позволяет последовательно обходить дерево документа и получать только нужные узлы по мере обхода. Например, создадим объект для обхода элементов:
{
const walker = document.createTreeWalker(
document.body,
NodeFilter.SHOW_ELEMENT
);

let node;

while ((node = walker.nextNode())) {
console.log(node.tagName);
}
}

Обход начинается с потомков переданного корневого узла, поэтому сам document.body в цикл не попадёт.

TreeWalker поддерживает фильтрацию узлов. Например, можно возвращать только кнопки во время обхода дерева:
{
const walker = document.createTreeWalker(
document.body,
NodeFilter.SHOW_ELEMENT,
{
acceptNode(node) {
return node.tagName === 'BUTTON'
? NodeFilter.FILTER_ACCEPT
: NodeFilter.FILTER_SKIP;
}
}
);

let node;

while ((node = walker.nextNode())) {
console.log(node);
}
}

Фильтр вызывается для узлов во время обхода, поэтому отдельная коллекция найденных элементов не создаётся.

FILTER_SKIP пропускает текущий узел, но продолжает обход его потомков. Если необходимо исключить всё поддерево целиком, используется FILTER_REJECT. TreeWalker также поддерживает навигацию в разных направлениях:
walker.parentNode();
walker.firstChild();
walker.lastChild();
walker.previousSibling();
walker.nextSibling();
walker.previousNode();
walker.nextNode();

Например, можно найти первый элемент с атрибутом data-error и сразу прокрутить страницу к нему:
{
const walker = document.createTreeWalker(
document.body,
NodeFilter.SHOW_ELEMENT
);

let node;

while ((node = walker.nextNode())) {
if (node.hasAttribute('data-error')) {
node.scrollIntoView({
behavior: 'smooth',
block: 'center'
});

break;
}
}
}

В отличие от querySelectorAll(), TreeWalker не создаёт промежуточную коллекцию найденных элементов, а возвращает узлы по мере обхода дерева.

При этом TreeWalker не обязательно будет быстрее querySelectorAll() в каждом конкретном случае. Выбор зависит от задачи: для простого поиска по CSS-селектору обычно удобнее querySelector() или querySelectorAll(), а для управляемого последовательного обхода дерева — TreeWalker.

🔥 TreeWalker определён в DOM Standard и предоставляет низкоуровневый механизм навигации по DOM с возможностью фильтрации узлов во время обхода. Он подходит для реализации редакторов, инструментов анализа DOM и библиотек, которым требуется последовательный обход дерева с полным контролем над процессом навигации.

📣 Code Ready | #практика

Node.normalize(): восстановление нормализованной формы текстовых узлов в DOM!

После операций с Text, Range и точечной модификации DOM содержимое элемента может оказаться фрагментировано на несколько соседних текстовых узлов.
const container = document.createElement('div');
const text = document.createTextNode('Hello');

container.append(text);

const tail = text.splitText(2);

console.log([...container.childNodes].map(node => node.data));
// ['He', 'llo']

Для рендеринга это обычно не имеет значения:
console.log(container.textContent);
// Hello

Но для кода, который анализирует структуру дерева через childNodes, firstChild, nextSibling или хранит ссылки на конкретные Text-узлы, такая фрагментация уже существенна.

Метод Node.normalize() приводит всё поддерево узла к нормализованной форме:
container.normalize();

console.log(container.childNodes.length);
// 1

console.log(container.firstChild.data);
// Hello

Нормализация выполняется рекурсивно и гарантирует, что в обработанном поддереве: не останется пустых текстовых узлов; не останется соседних текстовых узлов без разделяющего их элемента, комментария или другого типа узла.

При объединении данные последующих Text-узлов добавляются к первому узлу группы, а сами последующие узлы удаляются из дерева.
console.log(tail.parentNode);
// null

Сохранённая ссылка tail при этом не становится невалидной: объект продолжает существовать, но больше не является частью DOM-дерева.

Важно и другое: normalize() не объединяет весь текст элемента в один узел, если между текстовыми узлами находятся другие узлы.
Hello DOM!

Здесь текст до и после  останется в разных Text-узлах и после нормализации.

Метод особенно полезен после splitText(), операций с Range и редакторских сценариев, где текстовые узлы регулярно разрезаются и склеиваются:
const paragraph = document.createElement('p');
const text = document.createTextNode('Hello world');

paragraph.replaceChildren(text);

text.splitText(5);

console.log(paragraph.childNodes.length);
// 2

paragraph.normalize();

console.log(paragraph.childNodes.length);
// 1

🔥 Node.normalize() не меняет текстовое содержимое элемента, но приводит его поддерево к нормализованной форме: без пустых и соседних текстовых узлов. Это полезно перед обходом DOM, сериализацией, сравнением структуры или выполнением алгоритмов, которые рассчитывают на предсказуемую организацию Text-узлов.

📣 Code Ready | #практика