Базовая работа с элементами веб страницы через JavaScript

Получение элементов

В JavaScript для взаимодействия с HTML-элементами используются методы работы с DOM (Document Object Model). Основные способы получения элементов:

  • document.getElementById(id) — возвращает элемент по уникальному атрибуту id.
    Пример: const button = document.getElementById('submit-btn');

  • document.querySelector(selector) — возвращает первый элемент, соответствующий CSS-селектору.
    Пример: const title = document.querySelector('h1'); или const item = document.querySelector('.item.active');

  • document.querySelectorAll(selector) — возвращает NodeList (массивоподобный объект) всех элементов, соответствующих селектору.
    Пример: const buttons = document.querySelectorAll('button');

  • document.getElementsByTagName(name) — возвращает HTMLCollection элементов по тегу.
    Пример: const paragraphs = document.getElementsByTagName('p');

  • document.getElementsByClassName(name) — возвращает HTMLCollection элементов по классу.
    Пример: const items = document.getElementsByClassName('list-item');

⚠️ Методы, возвращающие коллекции (HTMLCollection, NodeList), не являются настоящими массивами и не имеют методов массивов (например, .map(), .filter()). Для их использования можно преобразовать в массив через [...collection] или Array.from(collection).

Изменение свойств элемента

После получения элемента можно изменять его атрибуты и содержимое:

  • element.textContent — устанавливает или возвращает текстовое содержимое элемента (без HTML-разметки).
    Пример: paragraph.textContent = 'Новый текст';

  • element.innerHTML — устанавливает или возвращает HTML-содержимое элемента (включая разметку).
    Пример: div.innerHTML = '<strong>Жирный текст</strong>';

  • element.setAttribute(name, value) — задаёт значение атрибута.
    Пример: button.setAttribute('disabled', 'true');

  • element.getAttribute(name) — получает значение атрибута.
    Пример: const type = input.getAttribute('type');

  • element.removeAttribute(name) — удаляет атрибут.
    Пример: button.removeAttribute('disabled');

💡 Используйте textContent для изменения текста — он безопаснее innerHTML, так как не выполняет HTML-код и защищает от XSS-атак.

Изменение CSS стилей элемента

Стили элемента можно менять напрямую через свойство style — оно представляет собой объект, содержащий все CSS-свойства в формате camelCase:

  • element.style.propertyName = 'value';
    Примеры: 
    element.style.color = 'red';
element.style.fontSize = '20px';
element.style.backgroundColor = '#f0f0f0';
element.style.marginTop = '10px';

🔍 Важно: CSS-свойства с дефисом (например, background-color) в JavaScript записываются в camelCase (backgroundColor).

Ограничения:

  • Стили, заданные через style, имеют приоритет над внешними CSS-правилами.
  • Нельзя установить несколько стилей одновременно — только по одному свойству.
  • Для сложных стилевых изменений рекомендуется использовать классы (classList):
element.classList.add('highlight');
element.classList.remove('hidden');
element.classList.toggle('active');

✅ Использование classList предпочтительнее прямого изменения style — это позволяет отделять логику от стилей и поддерживать чистоту кода.