JavaScript — универсальный язык программирования, широко используемый для веб-разработки. Одной из его ключевых особенностей является возможность манипулировать объектной моделью документа (DOM), которая позволяет динамически изменять содержимое и структуру веб-страницы. В этой статье мы рассмотрим десять различных методов JavaScript, которые помогут вам эффективно манипулировать DOM. Каждый метод будет сопровождаться примером кода, демонстрирующим его использование.

1. getElementById():
   Метод getElementById() используется для выбора элемента по его уникальному идентификатору (id) в DOM. Он возвращает элемент как объект, что позволяет легко изменять его свойства или содержимое.

const element = document.getElementById('elementId');

2. querySelector():
   Метод querySelector() позволяет выбирать элементы в DOM с помощью селекторов CSS. Он возвращает первый соответствующий элемент, что делает его гибким и мощным для манипуляций с DOM.

const element = document.querySelector('.className');

3. querySelectorAll():
   Подобно querySelector(), метод querySelectorAll() выбирает несколько элементов, соответствующих селектору CSS, и возвращает их в виде NodeList.

const elements = document.querySelectorAll('.className');

4. createElement():
   Метод createElement() используется для динамического создания нового элемента HTML. Затем вы можете манипулировать его свойствами и добавлять его в DOM.

const newElement = document.createElement('div');

5. appendChild():
   Метод AppendChild() используется для добавления нового дочернего элемента к существующему родительскому элементу в DOM.

parentElement.appendChild(newChildElement);

1. removeChild():
   Метод RemoveChild() позволяет удалить дочерний элемент из его родительского элемента в DOM.

parentElement.removeChild(childElement);

7. innerHTML:
   Свойство InnerHTML позволяет получать или устанавливать HTML-содержимое элемента. Это мощный метод изменения содержимого элемента.

element.innerHTML = '<p>New content</p>';

8. classList.add():
   Метод classList.add() добавляет к элементу один или несколько классов CSS, что позволяет динамически изменять его стиль.

element.classList.add('className');

9. classList.remove():
   Метод classList.remove() удаляет из элемента один или несколько классов CSS.

element.classList.remove('className');

10. style:
    Свойство style позволяет напрямую изменять встроенные свойства CSS элемента.

element.style.color = 'red';

Эти десять методов JavaScript обеспечивают прочную основу для эффективного манипулирования DOM. Используя эти методы, вы можете динамически изменять содержимое и структуру веб-страницы, повышая ее интерактивность и удобство для пользователей. Поэкспериментируйте с этими методами в своих проектах JavaScript, чтобы раскрыть весь потенциал манипулирования DOM.

Не забывайте использовать эти методы ответственно и учитывать оптимизацию производительности при работе с крупномасштабными задачами манипулирования DOM.

Применив эти методы, вы будете хорошо подготовлены к созданию динамических и интерактивных веб-приложений.