DOM и браузер

getElementById ищет один элемент по атрибуту id и возвращает его или null. querySelector принимает любой CSS-селектор и возвращает первое совпадение или null. querySelectorAll возвращает статический NodeList со всеми совпадениями (пустой, если их нет). Методы по CSS-селектору гибче, но медленнее поиска по id.

Событие проходит три фазы: погружение идёт вниз от window через предков к цели, фаза цели срабатывает на самом элементе, затем всплытие идёт обратно вверх через предков. Обработчики по умолчанию работают в фазе всплытия; передача true (или {capture: true}) в addEventListener заставляет их работать в фазе погружения. Всплытие позволяет родителю реагировать на события его потомков.

Атрибут — это строка, записанная в исходном HTML; getAttribute('value') возвращает текст исходной разметки. Свойство — живое значение на DOM-объекте, поэтому input.value отражает то, что ввёл пользователь, и меняется по мере ввода. Для большинства атрибутов они синхронизируются лишь при разборе; затем смена свойства оставляет атрибут замороженным на исходной разметке. Имена тоже различаются — атрибут class соответствует свойству className.

addEventListener(type, handler) привязывает колбэк к типу события, не затирая уже добавленные, поэтому у цели может быть много обработчиков. Когда событие срабатывает, браузер вызывает каждый обработчик с объектом Event: type, target (где оно возникло), currentTarget и данные конкретного типа, например key или координаты. removeEventListener отвязывает обработчик по той же ссылке.

textContent читает или пишет обычный текст элемента, трактуя теги буквально. innerHTML читает или заменяет его разметку, разбирая строку как HTML. style задаёт встроенный CSS по свойствам (el.style.fontSize). setAttribute/getAttribute работают с HTML-атрибутами, а classList добавляет, удаляет или переключает отдельные CSS-классы, не затирая остальные. Для недоверенного текста предпочитайте textContent вместо innerHTML, чтобы избежать инъекций.

Делегирование событий вешает один слушатель на общего предка и опирается на всплытие, чтобы обрабатывать события многих потомков, вместо привязки к каждому ребёнку. Внутри обработчика event.target — элемент, который реально вызвал событие, а event.currentTarget — элемент, к которому привязан слушатель. Через target (часто с closest) определяют, на каком ребёнке произошло действие, включая добавленных позже.

Вы определяете класс, наследующий HTMLElement, и регистрируете его через customElements.define('my-tag', MyClass); имя обязано содержать дефис. Коллбэки жизненного цикла вызываются автоматически: connectedCallback при входе в DOM, disconnectedCallback при удалении и attributeChangedCallback при смене наблюдаемого атрибута. attachShadow({ mode: 'open' }) даёт элементу инкапсулированное shadow-дерево, чьи разметка и стили ограничены областью и изолированы от внешнего документа.

preventDefault отменяет действие по умолчанию, но не останавливает движение события. stopPropagation прекращает дальнейшее погружение или всплытие к другим элементам, но всё же запускает прочие обработчики текущего; stopImmediatePropagation ещё пропускает эти оставшиеся обработчики. Пассивный слушатель обещает не вызывать preventDefault, давая браузеру прокручивать без ожидания. В инлайн-обработчике HTML return false делает и prevent-default, и stop-propagation.