Язык разметки HTML и каскадный язык CSS являются строительными блоками веб-сайтов, которые могут быть легко запрограммированы и интерпретированы людьми. Однако для рендеринга этих строк кода веб-браузеры преобразуют эти файлы в древовидную структуру, которая называется DOM, также известной как объектная модель документа.

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

Примечание. Все в дереве DOM является объектом, который включает в себя теги элементов, пробелы и пробелы событий. Собственно говоря, все, что есть в исходном коде, тоже будет присутствовать в этой иерархической структуре.

Как показано на изображении, в верхней части дерева DOM находится объект Document, который действует как родитель корневого элемента (HTML) и предок всех остальных узлов. Для доступа к этим потомкам и потомкам DOM поддерживает несколько различных методов, перечисленных ниже.

  • document.getElementById(id): найти элемент с идентификатором, определенным в HTML.
  • document.getElementsByTagName(tag): найти все элементы с заданным именем тега.
  • document.getElementsByClassName(name): найти все элементы с заданным именем класса.
  • document.querySelector(‘#id’/‘.class’/‘tagName’):один из самых универсальных селекторов элементов в DOM, поскольку он поддерживает идентификатор, имя класса и имя тега. Если несколько элементов имеют одинаковый класс или тег, он автоматически привязывается к первому.
  • document.querySelectorAll(‘#id’/‘.class’/‘tagName’): То же, что и «document.querySelector», но создает коллекцию всех элементов с совпадающим значением.

Теперь, когда мы знаем, как получить доступ к элементам DOM, давайте посмотрим, как ими манипулировать:

Добавление и удаление элементов

  • document.createElement(elementName): создайте элемент HTML, указанный в скобках.
  • document.appendChild(element):добавляет данный элемент HTML к объекту документа.
  • document.replaceChild(new, old):используется для замены элемента HTML в дереве DOM.
  • document.removeChild(element):используется для удаления объекта/элемента.

События ДОМ

Чтобы сделать веб-сайты интерактивными, веб-разработчики могут добавить что-то под названием «прослушиватели событий», которые при запуске на основе определенного события, такого как щелчок мыши, нажатие клавиши, могут вызывать функцию, которая в конечном итоге может обеспечить желаемый результат, например изменение цвета, изображения или текста; назвать несколько.

Пример:

var body = document.querySelector('body');
body.addEventListener('click', randomBackgroundColor);
function randomBackgroundColor () {
    var randomColor = '#' + (Math.floor(100000 + Math.random() * 900000));
    body.style.backgroundColor = randomColor;
}

Первая строка кода создаст переменную с именем body, которая нацелена на элемент body в HTML. После этого каждый раз, когда пользователь щелкает в любом месте тела, он запускает прослушиватель событий, вызываемый randomBackgroundColor, который является функцией и, как следует из названия, меняет фон веб-сайта/проекта.

Сохраняя ее всеобъемлющей и удобной для начинающих, я закончу эту статью здесь. Однако, если вам интересно узнать больше об этой теме. Проверьте DOM на Javascript.info