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

1. getElementById():
   Метод getElementById()возвращает ссылку на первый элемент с указанным идентификатором.

   let element = document.getElementById("myElement");

2. getElementsByClassName():
   Метод getElementsByClassName()возвращает коллекцию всех элементов с указанным именем класса.

   let elements = document.getElementsByClassName("myClass");

3. getElementsByTagName():
   Метод getElementsByTagName()возвращает коллекцию всех элементов с указанным именем тега.

   let elements = document.getElementsByTagName("div");

4. querySelector():
   Метод querySelector()возвращает первый элемент, соответствующий указанному селектору CSS.

   let element = document.querySelector("#myElement .myClass");

5. querySelectorAll():
   Метод querySelectorAll()возвращает статический NodeList, представляющий все элементы, соответствующие указанному селектору CSS.

   let elements = document.querySelectorAll("div.myClass");

6. createElement():
   Метод createElement()создает элемент HTML с указанным именем тега.

   let element = document.createElement("div");

7. appendChild():
   Метод appendChild()добавляет узел в качестве последнего дочернего элемента указанного элемента.

   parentElement.appendChild(childElement);

8. removeChild():
   Метод removeChild()удаляет указанный дочерний узел из DOM.

   parentElement.removeChild(childElement);

9. replaceChild():
   Метод replaceChild()заменяет дочерний узел новым узлом.

   parentElement.replaceChild(newElement, oldElement);

10. innerHTML:
    Свойство innerHTMLустанавливает или возвращает HTML-содержимое элемента.

    element.innerHTML = "<p>Hello, world!</p>";

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

    element.style.color = "red";

12. addEventListener():
    Метод addEventListener()присоединяет функцию обработчика событий к элементу.

    element.addEventListener("click", handleClick);

Объект documentJavaScript предоставляет богатый набор методов для взаимодействия и управления содержимым веб-страницы. В этой статье рассмотрены лишь некоторые из наиболее часто используемых методов, но их гораздо больше. Эффективно используя эти методы, вы можете создавать динамические и интерактивные веб-страницы.