Что такое DOM и как мы используем его в веб-разработке? Мы рассмотрим эти два основополагающих вопроса и многое другое в этой статье.
Что такое DOM?
DOM означает объектную модель документа, и это JavaScript-представление вашей веб-страницы. DOM берет элементы HTML и стили CSS и представляет их с помощью объектов JavaScript.
DOM представлен в виде древовидной структуры, в которой каждый элемент рассматривается как отдельный узел. Узел документа является корнем дерева.
По сути, DOM — это то, как JavaScript может просматривать и взаимодействовать с содержимым вашего веб-сайта, в частности с HTML и CSS, создавая гибкий и динамичный пользовательский интерфейс. Он служит своего рода порталом, который JavaScript использует для доступа к вашему веб-сайту, и является важной частью наполнения вашего веб-сайта функциональностью и интерактивностью.
DOM автоматически создается вашим браузером, и вы можете просмотреть его с помощью инструментов разработчика Chrome.
Откройте браузер, щелкните правой кнопкой мыши свободное место на странице и выберите проверить. Откройте вкладку console и введите:
console.dir(document)
Подробный список всех объектов в DOM появится в окне консоли.
Вы можете развернуть каждый из этих объектов, щелкнув стрелку, и посмотреть, какие свойства и методы в настоящее время назначены объекту.
Используя информацию, которую мы получаем из DOM, JavaScript позволяет нам обновлять, изменять, манипулировать и даже удалять контент на наших страницах, а также добавлять события.
Как мы используем DOM?
Теперь, когда вы видите множество объектов, содержащихся в DOM, вы можете выбрать эти объекты и начать манипулировать ими с помощью JavaScript.
Есть несколько команд, которые вы можете использовать для выбора объектов.
· .getElementById()
· .getElementsByTag()
· .getElementsByClassName()
· .querySelector()
· .querySelectorAll()
Поскольку узел документа работает как корень DOM, каждая команда имеет префикс ключевого слова document.
getElementById — эта команда выбирает один объект по его идентификатору HTML, который является уникальным идентификатором. Если элементов с идентификатором несколько, то будет возвращен только первый.
document.getElementById(red);
getElementsByTag — эта команда выбирает несколько объектов по их HTML-тегу.
document.getElementsByTagName('div');
getElementsByClassName — эта команда выбирает несколько объектов по их HTML-классу.
document.getElementsByClassName('dog');
querySelector — эта команда является более всеобъемлющей, поскольку ее можно использовать для выбора идентификаторов, тегов и классов. Это новая команда, более гибкая и адаптируемая, чем старые «команды get». Если имеется более одного идентификатора, тега или класса, он просто вернет первый.
document.querySelector('div');
querySelectorAll — эта команда выбирает все выбранные вами идентификаторы, теги или классы. Если имеется более одного элемента div, эта команда вернет их все.
document.querySelectorAll('div')
Может быть полезно превратить этот объект в переменную, чтобы упростить его обновление, изменение и манипулирование.
let graph = document.querySelector('img');
После того, как вы выбрали объекты, вы можете применить JavaScript непосредственно к этим объектам, манипулируя либо свойством, либо методом объекта.
Свойство — это описание объекта. Это может быть цвет или размер. Хотя метод — это действие, которое может выполнять объект, он больше похож на функцию.
И свойства, и методы применяются с использованием записи через точку.
Команда get просто вернет текущее значение объекта, а команда set обновит значение.
Когда дело доходит до свойств, мы можем либо получить, либо установить значение свойства.
document.querySelector('div').innerText += " Your dog is " + humanAge;
Когда дело доходит до методов, мы вызываем их или выполняем, точно так же, как и функции. Методы требуют набора круглых скобок при выполнении.
document.querySelector('h1').getAnimations();
Теперь мы знаем, что такое DOM, как его просматривать, как выбирать объекты и как манипулировать этими объектами с помощью свойств и методов JavaScript.
