Нужен базовый пример изменения DOM элементов через JavaScript

Оффтоп javascript
1

Привет всем! Я только начинаю изучать JavaScript и мне нужна помощь с DOM манипуляциями. Хочу разобраться, как можно изменять содержимое веб-страницы с помощью скриптов.

let заголовок = document.getElementById('главный-заголовок');
заголовок.textContent = 'Новый текст заголовка';

let кнопка = document.querySelector('.моя-кнопка');
кнопка.addEventListener('click', function() {
    let блок = document.createElement('div');
    блок.innerHTML = '<p>Добавленный элемент</p>';
    document.body.appendChild(блок);
});

Вот такой код я нашел, но не очень понимаю все нюансы. Может кто-то объяснить или показать другие способы работы с DOM? Буду благодарен за любые советы и примеры!

2

А ты пробовал через innerHTML вместо textContent? Там можно HTML-теги вставлять. И еще классы менять удобно через classList.add() или classList.remove(). Какую конкретно задачу решаешь? Может проще будет через готовые методы подойти к твоей проблеме.

3

Код выглядит норм, только учти что getElementById может вернуть null если элемент не найдется. лучше всегда проверять if (заголовок) { ... } перед изменением. еще совет - вместо appendChild можно использовать insertAdjacentHTML, это проще для добавления html. например document.body.insertAdjacentHTML('beforeend', '<div><p>новый блок</p></div>'). И да, addEventListener лучше выносить в отдельную функцию если логика сложная будет.

4

Твой код рабочий, но есть пара моментов. Обрати внимание на document.querySelector() vs document.querySelectorAll() - первый возвращает только один элемент, второй все найденные. Еще полезно знать про element.style.property для изменения стилей напрямую, например блок.style.backgroundColor = 'red'. И не забывай про removeChild() если нужно удалять элементы. Основы у тебя правильные, просто практикуйся больше.